2

我正在尝试添加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>
4

1 回答 1

1

onChange返回一个值ReactDatetime（对象moment或字符串）。但formik.handleChange收到一个事件。所以你需要像这样更新：

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

或使用setFieldValue

onChange={(value) =>
  formik.setFieldValue("date_of_the_event", value)
}
于 2021-08-17T13:50:43.770 回答