使用 useFormik 的字段数组 - Javascript

在表单开发中，我们经常需要处理的是多个字段，而且这些字段可能需要进行验证、提交等操作。为了方便开发，我们可以使用 useFormik 来管理这些字段。在本文中，我们将介绍如何使用 useFormik 的字段数组来处理表单。

安装

首先，我们需要安装 formik。可以使用 npm 或 yarn 进行安装：

npm install formik
# 或者
yarn add formik

使用

使用 useFormik 来管理表单字段非常简单。我们只需要传递一个包含字段的初始值、验证函数和提交函数的对象即可。例如，我们可以如下定义一个表单：

import { useFormik } from 'formik';

const MyForm = () => {
  const formik = useFormik({
    initialValues: {
      name: '',
      age: 0,
      gender: '',
    },
    validate: values => {
      const errors = {};
      if (!values.name) {
        errors.name = 'Required';
      }
      if (values.age < 18) {
        errors.age = 'Too young';
      }
      if (!values.gender) {
        errors.gender = 'Required';
      }
      return errors;
    },
    onSubmit: values => {
      alert(JSON.stringify(values, null, 2));
    },
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <label htmlFor="name">Name</label>
      <input
        type="text"
        id="name"
        name="name"
        onChange={formik.handleChange}
        onBlur={formik.handleBlur}
        value={formik.values.name}
      />
      {formik.touched.name && formik.errors.name && (
        <div className="error">{formik.errors.name}</div>
      )}

      <label htmlFor="age">Age</label>
      <input
        type="number"
        id="age"
        name="age"
        onChange={formik.handleChange}
        onBlur={formik.handleBlur}
        value={formik.values.age}
      />
      {formik.touched.age && formik.errors.age && (
        <div className="error">{formik.errors.age}</div>
      )}

      <label htmlFor="gender">Gender</label>
      <select
        id="gender"
        name="gender"
        onChange={formik.handleChange}
        onBlur={formik.handleBlur}
        value={formik.values.gender}
      >
        <option value="">Choose one</option>
        <option value="male">Male</option>
        <option value="female">Female</option>
        <option value="other">Other</option>
      </select>
      {formik.touched.gender && formik.errors.gender && (
        <div className="error">{formik.errors.gender}</div>
      )}

      <button type="submit">Submit</button>
    </form>
  );
};

在这个例子中，我们定义了一个包含三个字段的表单，分别是 name、age 和 gender。我们在初始化 formik 时传递了这些字段的初始值、验证函数和提交函数。

在表单的元素中，我们使用了 formik.handleChange、formik.handleBlur 和 formik.values 来与 formik 交互。这些方法和属性可以让我们很方便地管理表单。

字段数组

使用 useFormik 的字段数组可以让我们更方便地管理多个字段。首先，我们需要定义一个包含所有字段的数组。例如，我们可以在 initialValues 中定义一个数组：

import { useFormik } from 'formik';

const MyForm = () => {
  const formik = useFormik({
    initialValues: {
      users: [
        {
          name: '',
          age: 0,
          gender: '',
        },
      ],
    },
    validate: values => {
      // ...
    },
    onSubmit: values => {
      // ...
    },
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      {formik.values.users.map((user, i) => (
        <div key={i}>
          <label htmlFor={`users.${i}.name`}>Name</label>
          <input
            type="text"
            id={`users.${i}.name`}
            name={`users.${i}.name`}
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            value={user.name}
          />
          {formik.touched.users?.[i]?.name && formik.errors.users?.[i]?.name && (
            <div className="error">{formik.errors.users[i]?.name}</div>
          )}

          <label htmlFor={`users.${i}.age`}>Age</label>
          <input
            type="number"
            id={`users.${i}.age`}
            name={`users.${i}.age`}
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            value={user.age}
          />
          {formik.touched.users?.[i]?.age && formik.errors.users?.[i]?.age && (
            <div className="error">{formik.errors.users[i]?.age}</div>
          )}

          <label htmlFor={`users.${i}.gender`}>Gender</label>
          <select
            id={`users.${i}.gender`}
            name={`users.${i}.gender`}
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            value={user.gender}
          >
            <option value="">Choose one</option>
            <option value="male">Male</option>
            <option value="female">Female</option>
            <option value="other">Other</option>
          </select>
          {formik.touched.users?.[i]?.gender && formik.errors.users?.[i]?.gender && (
            <div className="error">{formik.errors.users?.[i]?.gender}</div>
          )}
        </div>
      ))}
      
      <button type="submit">Submit</button>
    </form>
  );
};

在这个例子中，我们定义了一个包含多个用户的数组。我们可以使用 map 方法来渲染每个用户的表单元素。需要注意的是，在定义表单元素的 name 和 id 属性时，我们使用了 users.${i} 来指定当前用户的索引。

在表单元素的属性中，我们使用了 user.name、user.age 和 user.gender 来获取当前用户的属性值。在错误提示中，我们使用了 formik.errors.users?.[i]?.name、formik.errors.users?.[i]?.age 和 formik.errors.users?.[i]?.gender 来获取当前用户的错误信息。

总结

使用 useFormik 的字段数组可以让我们更方便地管理多个字段。需要注意的是，在定义表单元素的 name 和 id 属性时，我们需要使用 . 和 [] 来指定多个字段的层级关系。在表单元素的属性中，我们可以使用字段数组中的元素来获取每个字段的属性值。在错误提示中，我们可以使用字段数组中的元素来获取每个字段的错误信息。