相关疑难解决方法(0)

我开始使用formik库进行反应,我无法弄清楚道具handleChange和handleBlur的用法.

根据文档,handleBlur可以设置为a上的prop <Formik/>,然后必须手动向下传递给<input/>.

我已经尝试过了,没有成功:(为了更清晰,我保留了关于handleBlur的代码)

import React from "react";
import { Formik, Field, Form } from "formik";
import { indexBy, map, compose } from "ramda";
import { withReducer } from "recompose";

const MyInput = ({ field, form, handleBlur, ...rest }) =>
  <div>
    <input {...field} onBlur={handleBlur} {...rest} />
    {form.errors[field.name] &&
      form.touched[field.name] &&
      <div>
        {form.errors[field.name]}
      </div>}
  </div>;

const indexById = indexBy(o => o.id);
const mapToEmpty = map(() => "");

const EmailsForm = ({ fieldsList }) => …

我知道它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" …