reactjs - 如何处理 Formik 的 `handleChange` Prop ？

Question

我明白了 Field有一个 onChange您可以在其中传递自己的 Formik 的属性 onChange来自这里的 Prop :https://jaredpalmer.com/formik/docs/api/formik#handlechange-e-reactchangeevent-any-void .

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

在回复的人发表评论后进行编辑，谢谢:

我的代码在 Field 的 onChange Prop 中使用了这两个回调:

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其中有一个 value prop 包含该字段的值，以及 form prop 包含可用于设置值的辅助方法。我需要查看您的代码结构以提供有关如何实现所需内容的具体建议，但您可以通过调用 form.setFieldValue(field.name, field.value) 来模拟默认功能。 .此外，field prop 在 field.onChange 中默认内置了这个处理程序支柱。