React Formik 如何自定义 onChange 和 onBlur

Formik 是一个非常流行的 React 库，用于构建表单和处理表单状态。通常，Formik 使用 useFormik 钩子或 <Formik> 组件来管理表单输入的 values、errors、touched 等状态，同时提供 handleChange 和 handleBlur 方法来处理输入字段的更改和失焦事件。如果你想自定义 onChange 或 onBlur 事件处理，可以按照以下示例进行操作。

首先，这里是使用 Formik 的常规方式，其中 handleChange 和 handleBlur 被用于自动处理表单输入的改变和失焦：

jsx
import { Formik, Form, Field } from 'formik';

function MyForm() {
  return (
    <Formik
      initialValues={{ myField: '' }}
      onSubmit={(values) => {
        // 提交表单时执行的操作
      }}
    >
      {({ handleChange, handleBlur, handleSubmit, values }) => (
        <Form onSubmit={handleSubmit}>
          <Field
            name="myField"
            onChange={handleChange}
            onBlur={handleBlur}
            value={values.myField}
          />
          {/* 其他表单元素 */}
        </Form>
      )}
    </Formik>
  );
}

如果你希望自定义 onChange 或 onBlur 事件，你可以在 Field 组件或者 <input>、<select>、<textarea> 元素上直接实现这些事件的处理函数。以下是一个如何自定义这些事件的示例：

jsx
import { Formik, Form, Field } from 'formik';

function MyForm() {
  return (
    <Formik
      initialValues={{ myField: '' }}
      onSubmit={(values) => {
        // 提交表单时执行的操作
      }}
    >
      {({
        handleChange,
        handleBlur,
        handleSubmit,
        values,
        setFieldValue,
        setFieldTouched
      }) => {

        // 自定义 onChange 方法
        const customOnChange = (e) => {
          const { name, value } = e.target;
          // 你可以在这里添加自定义逻辑
          console.log('Custom onChange for', name, 'with value', value);
          // 然后调用 Formik 的 handleChange 来更新值
          handleChange(e);
        };

        // 自定义 onBlur 方法
        const customOnBlur = (e) => {
          const { name } = e.target;
          // 你可以在这里添加自定义逻辑
          console.log('Custom onBlur for', name);
          // 然后调用 Formik 的 handleBlur 来设置 touched 状态
          handleBlur(e);
        };

        return (
          <Form onSubmit={handleSubmit}>
            <Field
              name="myField"
              onChange={customOnChange}
              onBlur={customOnBlur}
              value={values.myField}
            />
            {/* 其他表单元素 */}
          </Form>
        );
      }}
    </Formik>
  );
}

在上面的例子中，customOnChange 和 customOnBlur 函数被用于添加自定义逻辑，然后它们调用 Formik 的 handleChange 和 handleBlur 以确保表单状态被正确更新。你可以在自定义函数中添加任何逻辑，比如字段验证、格式化输入值等。