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

Question

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

类型错误：目标未定义

我怎样才能解决这个问题？

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

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)

标签： javascriptreactjsmaterial-uiformik

Answer 1

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

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

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