如何处理 Formik 的 `handleChange` 属性？

Question

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

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

根据回复者的评论进行编辑，谢谢：

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

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

每个字段组件都会接收一个字段 prop，其中包含一个value包含该字段值的 prop，以及一个包含form可用于设置该值的辅助方法的 prop。我需要查看代码的结构，以给出有关如何实现您想要的内容的具体建议，但您可以通过调用 来模拟默认功能form.setFieldValue(field.name, field.value)。此外，fieldprop 中默认内置了此处理程序field.onChange。