Question

我知道Field有一个onChange属性，您可以在此处传递自己的Formik onChange道具：https://jaredpalmer.com/formik/docs/api/formik#handlechange-e-reactchangeevent-any-void。

但是，我正在努力了解这些value[key]的传递位置，因此我可以处理以表格形式传递的数据。在withFormik(): How to use handleChange中发现，我可以将两个回调传递给Formik的onChange道具，但是我想知道是否有更好的方法来处理这个问题。

编辑人们的评论后进行回复，谢谢：

我的代码在Field的onChange属性中使用了这两个回调：

export default function FormikForm() {
  const onSubmitHandler = (formValues, actions) => {
    console.log(formValues);
    console.log(actions);
  };

  const onChangeHandler = (e) => {
    console.log(e.target.value);
  };

  return (
    <div>
      <h1>This is the Formik Form</h1>
      <Formik
        initialValues={{
          name: "",
          email: "",
          age: ""
        }}
        onSubmit={onSubmitHandler}
        render={props => {
          return (
            <Form>
              <label>
                Name
                <Field
                  name="name"
                  type="text"
                  placeholder="name"
                  onChange={e => {props.handleChange(e); onChangeHandler(e)}}
                />
              </label>
              <button type="submit">Submit</button>
            </Form>
          );
        }}
      />
    </div>
  );
}

是否有一种方法可以像onSubmitHandler中那样做，Formik自动地输出输入的值，而不必在onChange中调用这两个函数？

谢谢

Answer 1

每个字段组件都会收到一个field prop，其中有一个form道具，其中包含该字段的值，以及一个form.setFieldValue(field.name, field.value)道具，它包含可用于设置值的辅助方法。我需要查看代码的结构以提供有关如何实现所需功能的具体建议，但是您可以通过调用field来仿真默认功能。另外，field.onChange道具在{{1}}道具中默认内置了此处理程序。

如何处理Formik的`handleChange`道具？

1 个答案: