React多相同表单字段处理：如何单独获取并存入数据库？

方法一：用数组状态直接管理（适配动态/静态字段） #

将相同字段的数据存储在数组状态中，渲染时通过map生成输入框，每个输入框对应数组的索引，更新时精准修改对应位置的值。

示例代码：

import { useState } from 'react';

function MultiEmailForm() {
  // 初始化3个空邮箱的数组状态
  const [emails, setEmails] = useState(['', '', '']);

  const handleEmailChange = (index, e) => {
    const newEmails = [...emails];
    newEmails[index] = e.target.value;
    setEmails(newEmails);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // 直接将emails数组传给后端存入数据库
    console.log('待提交邮箱列表：', emails);
  };

  return (
    <form onSubmit={handleSubmit}>
      {emails.map((email, index) => (
        <div key={index}>
          <label>邮箱 {index + 1}</label>
          <input
            type="email"
            value={email}
            onChange={(e) => handleEmailChange(index, e)}
            placeholder="请输入邮箱"
          />
        </div>
      ))}
      <button type="submit">提交</button>
    </form>
  );
}

export default MultiEmailForm;

方法二：通过带索引的name属性区分（适合静态字段） #

给每个相同字段设置带索引的name属性（如name="emails[]"），提交时直接从表单对象中提取所有对应字段的值，生成数组后传给后端。

示例代码：

function MultiEmailForm() {
  const handleSubmit = (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    // 提取所有name为emails[]的字段值，得到数组
    const emails = formData.getAll('emails[]');
    console.log('待提交邮箱列表：', emails);
    // 传给后端存入数据库
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>邮箱1</label>
        <input type="email" name="emails[]" placeholder="请输入邮箱" />
      </div>
      <div>
        <label>邮箱2</label>
        <input type="email" name="emails[]" placeholder="请输入邮箱" />
      </div>
      <div>
        <label>邮箱3</label>
        <input type="email" name="emails[]" placeholder="请输入邮箱" />
      </div>
      <button type="submit">提交</button>
    </form>
  );
}

方法三：用React Hook Form简化处理（项目开发推荐） #

针对复杂表单，使用React Hook Form的useFieldArray可以高效管理重复字段，自带表单验证能力，代码更简洁易维护。

示例代码：

import { useForm, useFieldArray } from 'react-hook-form';

function MultiEmailForm() {
  const { register, control, handleSubmit } = useForm({
    defaultValues: {
      emails: ['', '', ''] // 初始化3个空邮箱
    }
  });

  // 用useFieldArray管理重复字段
  const { fields } = useFieldArray({
    control,
    name: 'emails'
  });

  const onSubmit = (data) => {
    // data.emails就是收集到的邮箱数组，直接传给后端
    console.log('待提交邮箱列表：', data.emails);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {fields.map((item, index) => (
        <div key={item.id}>
          <label>邮箱 {index + 1}</label>
          <input
            type="email"
            {...register(`emails[${index}]`, { required: true })}
            placeholder="请输入邮箱"
          />
        </div>
      ))}
      <button type="submit">提交</button>
    </form>
  );
}

内容的提问来源于stack exchange，提问作者Hudheyfa Cyerd