时间戳

首页 > 解决方案 > 如何处理 Formik 的 `handleChange` 道具？

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

问题描述

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

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

在收到回复的人的评论后进行编辑，谢谢：

我的代码在 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？

谢谢

标签： reactjsformik

解决方案

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

推荐阅读