Formik：将 Material UI Date Picker 作为道具传递给 React 组件时，目标未定义

Question

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

TypeError: 目标未定义

我该如何解决这个问题？

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

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

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

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

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

Answer 2

经过大量研究并感谢@Rosen Tsankov 将我的注意力指向onChange 函数。

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

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

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

从useField 返回的onChange 函数期望第一个参数是一个事件，在这种情况下是日期值。这就是我们得到错误的原因：

TypeError: 目标未定义

因为 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

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