如何在Formik上实现自定义handleChange函数？

Question

在输入元素中，handleChange 函数将从 onChange 事件接收事件对象。如何为如下所示的非输入字段创建自定义 handleChange 函数？

import React from 'react';
import { useFormik } from "formik";

const SomeForm = () =>
{
  const { handleChange, handleSubmit, values } = useFormik({
    initialValues: {
      type: `company`, name: ``,
    },
    onSubmit: values => {
      console.log(JSON.stringify(values, null, 2));
    },
  });

  return (

    <div>

      <form onSubmit={ handleSubmit }>
        <label>Type</label>
        <ul>
          <li className={ values.type === `company` && `active` }
               onClick={() => handleChange(/* some custom handle change */)} >
              Company
          </li>

          <li className={ values.type === `individual` && `active` }
               onClick={() => handleChange(/* some custom handle change */)} >
              Individual
          </li>
        </ul>

        <label>Full Name</label>

        <input type="text"
               name="name" 
               value={ value.name }
               onChange={ handleChange } />
      </form>

    </div>

  )
};

export default SomeForm;

Answer 1

使用 Field 组件的渲染 props 模式中提供的表单对象的 setField('fieldName',value) 方法。

Answer 2

我想这就是你所追求的。您可以在

field.onChange(e)

后添加自定义代码。

// Custom field
const MyTextField = ({ label, ...props }) => {
    const [field, meta] = useField(props);
    return (
        <>
            <input {...field} {...props}
                   onChange={e => {

                       // The original handler
                       field.onChange(e)
                       
                       // Your custom code
                       console.log('I can do something else here.')

                   }}
                   className={ meta.error && 'is-invalid'}` }  />
            {meta.touched && meta.error && (
                <div>{meta.error}</div>
            )}

        </>
    );
};

并像这样使用它

<MyTextField name="entry" type="text" />

Answer 3

有两种方法可以实现这一点，一种是使用

setFieldValue

，另一种方法是使用

handleChange

来实现相同的目的。

const {
handleChange, // this is utilized to update the state
setFieldValue,
} = useFormik({
    enableReinitialize: true,
    initialValues, //initial state for the "values"
    validationSchema, // the schema based on which the validation will be checked
    validateOnChange: true,
    onSubmit: (values, { setSubmitting, resetForm }) => {
      // HIT THE API HERE
      console.log("API IS BEING HIT");
     //  once the function has been executed, you can reset the form
      resetForm();
    },
  });

现在让我们看看如何使用这两种方法来处理值的更新

方法一：使用handleChange

 const handleChangeCustom = (
    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
  ) => {
    let { name,value } = e.target;
    handleChange({ target: { name: name, value: value } });
  };

或

const handleChangeCustom = (
    fieldName: string,
    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
  ) => {
    let { value } = e.target;
    handleChange({ target: { name: fieldName, value: value } });
  };

方法2：使用setFieldValue

  const handleChangeCustom = (
    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
  ) => {
    let {name, value } = e.target;
    setFieldValue(name, value);
  };

或

  const handleChangeCustom = (
    fieldName: string,
    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
  ) => {
    let { value } = e.target;
    setFieldValue(fieldName, value);
  };

主要区别在于，当您没有事件 (e) 时，setFieldValue 是更好的方法，因为它意味着直接更新状态。

但在大多数（几乎总是）情况下，两者都有效！！！