javascript - Formik 的 handleChange 抛出 "TypeError: null is not an object (evaluating ' _a.type' )"on DateInput' s onChange

Question

当我将 Formik 中的 handleChange 添加到“semantic-ui-calendar-react”DateInput 组件时，在选择日期时出现以下错误。

/image/l56hP.jpg “控制台输出”

AddWishlistFormDate.tsx

 import { FormikErrors, FormikProps, withFormik } from 'formik';
 import * as React from 'react';
 import { DateInput } from 'semantic-ui-calendar-react';
 import { Button, Form } from 'semantic-ui-react';

 export interface FormValues {
  date: string;
}

 interface Props {
  submit: (values: FormValues) => Promise<FormikErrors<FormValues> | null>;
}

 class C extends React.PureComponent<FormikProps<FormValues> & Props> {
  public render() {
    const {
      values: { date },
      handleChange,
      handleSubmit,
    } = this.props;
    return (
      <Form onSubmit={handleSubmit}>
        <Form.Field>
          <label>Date</label>
          <DateInput
            name="date"
            value={date}
            iconPosition="left"
            onChange={handleChange}
          />
        </Form.Field>
        <Button type="submit">Add</Button>
      </Form>
    );
  }
}

 export const AddWishlistFormDate = withFormik<Props, FormValues>({
  mapPropsToValues: () => ({ date: '' }),
  handleSubmit: async (values, { props, setErrors }) => {
    const errors = await props.submit(values);
    if (errors) {
      setErrors(errors);
    }
  },
})(C);

使用以下命令运行它

 const handleSubmit = async (values: FormValues) => {
    console.log(values);
    return null;
  };
  return <AddWishlistFormDate submit={handleSubmit} />;

Answer 1

你会这样做

          <DateInput
            name="date"
            value={date}
            iconPosition="left"
            onChange={(_, {value}) => setFieldValue('date', value)}
          />