Formik：将 Material UI Date Picker 作为 prop 传递给 React Component 时目标未定义

Question

我正在尝试创建一个可重用的组件。我将表单字段作为道具传递的地方。当我点击日期选择器字段时。我收到此错误：

TypeError: target is undefined

我该如何解决这个问题？

这是我的输入组件的样子：

import { useField } from 'formik';
import { DatePicker } from '@material-ui/pickers';

export const DatePickerField = ({ label, ...props }) => {
  const [field, meta] = useField(props);

  return (
    <DatePicker label={label} fullWidth {...field} {...props} />
  );
};

这是可重用组件的样子：

import { Form } from 'formik'

export const ReusableComp = ({ fields }) => (
  <Form noValidate>
      {fields}
  </Form>
)

这里是我使用这个组件的地方：

export const App = () => (
    <ReusableComp fields={
      <div className='mb-3'>
        <DateTimePickerField
          label='Start DateTime'
          name='start_date_time'
        />
      </div>
    } />
)

console.log(fields)

的结果

Answer 1

DatePicker 需要 onChange((date) => ...) but you are passing formik handler wich expects onChange((event) => ....)

Answer 2

经过大量研究并感谢@Rosen Tsankov 让我注意到 onChange 函数。

我在 SO 上看到了关于相同错误的问题，但没有得到解答。所以这可能会帮助他们以及将来遇到此错误的任何人。

正如@Rosen Tsankov 所说，material ui DatePicker 组件 returns 日期值作为 onChange 函数的第一个参数。

从 useField 返回的 field 具有以下内容：name、value、onChange、onBlur.

从 useField 返回的 onChange 函数期望第一个参数是一个事件，在本例中是日期值。这就是我们收到错误的原因：

TypeError: target is undefined

因为 formik 正在尝试访问 target 属性而 date 没有属性 target。像这样 date.target 这是 undefined

所以这就是我修复它的方法。而不是传播领域。我已将 field 中的名称和值添加到 DatePicker。然后我使用 formik 中的 setFieldValue 像这样手动更新输入值。

import { DatePicker } from '@material-ui/pickers';
import { useField, useFormikContext } from 'formik';

export const DatePickerField = ({ label, ...props }) => {
  const [field, meta] = useField(props);
  const { setFieldValue } = useFormikContext();

  return (
    <DatePicker
      fullWidth
      {...props}
      label={label}
      name={field.name}
      value={field.value}
      helperText={meta.error}
      error={meta.touched && Boolean(meta.error)}
      onChange={(value) => setFieldValue(field.name, value)}
    />
  );
};

Answer 3

在我的例子中，我使用的是 Material UI DesktopDatePicker（带有 Typescript），并像这样定义 onChange 道具解决了它：

onChange={(value): void => {
    formik.setFieldValue("dueDate", value);
}}

您必须将“dueDate”替换为您的 formik 值名称。

Formik：将 Material UI Date Picker 作为 prop 传递给 React Component 时目标未定义

Formik: target is undefined when passing Material UI Date Picker as prop to React Component

javascript

reactjs

material-ui

formik