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

【问题标题】：How to handle Formik's `handleChange` prop?如何处理 Formik 的 `handleChange` 道具？
【发布时间】：2020-01-26 22:09:46
【问题描述】：

我知道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 道具，但我想知道是否有更好的方法来处理这个问题。

在回复的人的 cmets 之后编辑，谢谢：

我的代码在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 中调用这两个函数？

谢谢

【问题讨论】：

不清楚你的问题，你到底在挣扎什么，你在哪里想出value[key] 任何你可以在这里发布的代码示例，你想把事情弄清楚？另外，您正在像 BA 一样写您的问题，尝试将其写成一个句子，可以内联发布链接而不是写 [0]，当我作为开发人员阅读它时，它看起来像一个数组 prop[0]

标签： reactjs formik

【解决方案1】：

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

【讨论】：

感谢@rutherford，添加了我的sn-p代码，希望现在更清楚了。