在使用formik时，如何将onChange添加到react-datetime？

Question

我正在尝试将onChangeformik.handleChange()添加到react-datetime，但它将不起作用。获取错误。如果没有onChange()，它将会工作。但当存在onChange()时，它将不起作用。

没有formik，它就能工作。但我还需要添加formik。

const initialValues = {
    enableReinitialize: true,
    validateOnMount: true,
    event_name: "",
    org_name: "",
    event_time: "",
    date_of_the_event: "",
    location: "",
    days_occurs: "",
    event_type: "",
    organizer_name: "",
    org_nic: "",
    cus_email: "",
    cus_con_number: "",
    description: "",
  };

const onSubmit = (values) => {
    console.log("Form Date", values);
};

  const formik = useFormik({
    initialValues,
    onSubmit,
    validationSchema,
  });

                   <Col md="6">
                      <FormGroup>
                        <label>Date of The Event</label>
                        <InputGroup className="input-group-alternative">
                          <InputGroupAddon addonType="prepend">
                            <InputGroupText>
                              <i className="ni ni-calendar-grid-58" />
                            </InputGroupText>
                          </InputGroupAddon>
                          <ReactDatetime
                            inputProps={{
                              placeholder: "Select the Date",
                              name: "date_of_the_event",
                            }}
                            timeFormat={false}
                            onChange={formik.handleChange}
                            onBlur={formik.handleBlur}
                            value={formik.values.date_of_the_event}
                          />
                        </InputGroup>
                      </FormGroup>
                    </Col>

Answer 1

ReactDatetime的onChange返回值(object moment或string)。但是formik.handleChange收到了一个事件。所以你需要像这样更新：

onChange={(value) =>
  formik.handleChange({
    target: {
      name: "date_of_the_event",
      value,
    },
  })
}

或者使用setFieldValue

onChange={(value) =>
  formik.setFieldValue("date_of_the_event", value)
}