React Formik：如何使用自定义 onChange 和 onBlur

Posted 2023-02-22

【中文标题】React Formik：如何使用自定义 onChange 和 onBlur

【英文标题】：React Formik : how to use custom onChange and onBlur

【发布时间】：2018-07-06 02:55:00

【问题描述】：

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

根据the docs，handleBlur 可以设置为<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 ) =>
  <Formik
    initialValues=compose(mapToEmpty, indexById)(fieldsList)
    validate=values => 
      // console.log("validate",  values );
      const errors =  values ;
      return errors;
    
    onSubmit=values => 
      console.log("onSubmit",  values );
    
    handleBlur=e => console.log("bluuuuurr",  e )
    render=( isSubmitting, handleBlur ) =>
      <Form>
        <Field
          component=MyInput
          name="email"
          type="email"
          handleBlur=handleBlur
        />
        <button type="submit" disabled=isSubmitting>
          Submit
        </button>
      </Form>
  />;

这种方法有什么问题？ handleBlur 和 handleChange 实际上应该如何使用？

【参考方案1】：

您需要从Formik 中删除第一个handleBlur，因为模糊事件仅在字段级别有效，并在您的字段元素中执行以下操作：

<Field
    component=MyInput
    name="email"
    type="email"
    onBlur=e => 
        // call the built-in handleBur
        handleBlur(e)
        // and do something about e
        let someValue = e.currentTarget.value
        ...
    
/>

见https://github.com/jaredpalmer/formik/issues/157

【讨论】：

这没问题，只要你不需要操纵值。就我而言，我想在自定义模糊处理程序中重新格式化字段的值，这会触发验证问题，因为setFieldValue() 不是异步的。见github.com/jaredpalmer/formik/issues/529

我认为这是一个单独的 Formik 问题，在没有一些变通方法的情况下，您无法在同一字段上执行 setFieldValue() 后立即获得更新的字段值。我是那次讨论的参与者之一。

【参考方案2】：

我使用 onChange 方法遇到了同样的问题，我认为它在 formik 道具中不存在。

所以我使用了 onSubmit 方法，因为它在 formik 道具中可用，它为我们提供了字段值，然后像这样将这些值传递给关注函数......

<Formik
          initialValues=initialValues
          validationSchema=signInSchema
          onSubmit=(values) => 
            registerWithApp(values);
            console.log(values);
          
        >

你可以在那里使用，我只是更新了状态并将其传递给 axios，就像这样......

    const [user, setUser] = useState(
    name: "",
    email: "",
    password: ""
  );

  const registerWithApp = (data) => 
    const  name, email, password  = data;
    setUser(
      name:name,
      email:email,
      password:password
    )
   
    if (name && email && password) 
      axios.post("http://localhost:5000/signup", user)
        .then(res => console.log(res.data))
    
    else 
      alert("invalid input")
    ;
  

及其工作... 希望对你有帮助。