如何通过React State/Redux管理动态多表单输入及值

我来帮你搞定这个动态表单的问题！你想要提交后得到每个字段对应的数组结果，用React State就能轻松实现，下面给你详细的步骤和代码示例：

一、React State实现方案 #

1. 初始化用户状态 #

首先我们用数组存储所有用户的表单数据，每个元素是包含firstName、middleName、lastName的对象。初始化时可以根据需要的用户数量生成空对象（你也可以改成动态传入用户数）：

import { useState } from 'react';

function UserForm() {
  // 初始化3个用户的空表单数据，数量可按需调整
  const [users, setUsers] = useState([
    { firstName: '', middleName: '', lastName: '' },
    { firstName: '', middleName: '', lastName: '' },
    { firstName: '', middleName: '', lastName: '' },
  ]);

2. 编写字段更新函数 #

我们需要一个函数处理输入框变化，通过索引定位到具体用户，同时更新对应的字段：

const handleInputChange = (index, field, value) => {
    // 复制原数组，遵循React状态不可变原则
    const updatedUsers = [...users];
    // 更新指定用户的指定字段
    updatedUsers[index][field] = value;
    setUsers(updatedUsers);
  };

3. 动态渲染表单+处理提交 #

循环遍历users数组生成每组输入框，绑定onChange事件；提交时通过map提取每个字段的数组：

const handleSubmit = (e) => {
    e.preventDefault();
    // 提取你需要的字段数组
    const firstNames = users.map(user => user.firstName);
    const middleNames = users.map(user => user.middleName);
    const lastNames = users.map(user => user.lastName);
    
    // 这里可以执行提交逻辑，比如发请求或打印结果
    console.log('First Names:', firstNames);
    console.log('Middle Names:', middleNames);
    console.log('Last Names:', lastNames);
  };

  return (
    <form onSubmit={handleSubmit}>
      {users.map((user, index) => (
        <div key={index} className="user-group">
          <h4>用户 {index + 1}</h4>
          <input
            type="text"
            placeholder="First Name"
            value={user.firstName}
            onChange={(e) => handleInputChange(index, 'firstName', e.target.value)}
          />
          <input
            type="text"
            placeholder="Middle Name"
            value={user.middleName}
            onChange={(e) => handleInputChange(index, 'middleName', e.target.value)}
          />
          <input
            type="text"
            placeholder="Last Name"
            value={user.lastName}
            onChange={(e) => handleInputChange(index, 'lastName', e.target.value)}
          />
        </div>
      ))}
      <button type="submit">Submit</button>
    </form>
  );
}

export default UserForm;

关键说明 #

• 通过index区分不同用户，确保更新时能精准定位到对应数据
• 每次更新都复制原数组再修改，符合React状态不可变的要求
• 提交时用map快速提取字段数组，完全匹配你想要的输出格式

二、Redux实现思路（如需全局状态管理） #

如果项目用了Redux，逻辑类似：

1. 在store里定义users数组状态
2. 创建UPDATE_USER_FIELD action，携带index、field、value参数
3. 在reducer中处理该action，复制原数组并更新指定用户的字段
4. 组件中用useSelector获取users，用useDispatch触发更新action
5. 提交逻辑和State方案一致，从store取数据提取数组即可

这样不管用原生State还是Redux，都能实现动态表单和数组式提交的需求啦！

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