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

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的onChangeprop，但我想知道是否有更好的方式来处理此问题。 在得到回复后编辑： 我的代码在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 中调用这两个函数？

谢谢

- Pere

---

你的问题不是很清楚，你到底遇到了什么困难？你从哪里得到了value[key]这个想法？你能否在这里发布任何代码示例以便我们更好地理解你的问题？此外，你的问题描述方式有些像BAs，尽量写成一个完整的句子。如果需要，可以直接在文本中插入链接，而不是写成[0]的形式，因为对于开发人员来说，这看起来像是一个数组prop[0]。 - Rikin

Answer 1

每个字段组件都接收一个 field prop，其中包含一个 value 属性，该属性包含该字段的值，以及一个 form 属性，其中包含您可以使用的帮助器方法来设置该值。我需要查看您代码的结构才能给出特定的建议，但是您可以通过调用 form.setFieldValue(field.name, field.value) 来模拟默认功能。此外，field 属性在 field.onChange 属性中默认内置了此处理程序。

- Chris B.

---

谢谢@rutherford，我添加了我的代码片段，希望现在更清晰了。 - Pere