ReactJS如何生成多个value属性同名但值相互独立的表单字段？

问题根因 #

你当前所有生成的输入框都绑定了同一个全局字符串状态，任意输入触发状态更新后，所有绑定该状态的输入框都会同步渲染最新值，自然会出现同步修改的问题。

可行解决方案 #

将单个字符串状态替换为和数组长度对应的数组状态，每个下标对应一个输入框的独立状态，修改时只更新对应下标的状态值即可：

import { useState } from 'react';

function App() {
  const array = [0, 1, 2];
  // 初始化和数组长度对应的状态数组，每个元素对应一个输入框的取值
  const [inputValues, setInputValues] = useState(new Array(array.length).fill(''));

  const HandleAdding = (e, index) => {
    e.preventDefault();
    const returnJson = { [index]: inputValues[index] };
    // 其余业务逻辑
  };

  // 更新指定下标的输入框状态
  const handleInputChange = (e, index) => {
    const newValues = [...inputValues];
    newValues[index] = e.target.value;
    setInputValues(newValues);
  };

  return (
    <div>
      {array.map((item, index) => (
        <form key={index} onSubmit={(e) => HandleAdding(e, index)}>
          <input 
            value={inputValues[index]} 
            onChange={(e) => handleInputChange(e, index)} 
          />
          <button type="submit">提交</button>
        </form>
      ))}
    </div>
  );
}

实现说明 #

• 初始化状态时根据目标数组的长度生成等长的空字符串数组，保证每个输入框都有独立的状态存储位置
• 遍历数组渲染输入框时带上下标参数，输入框的取值和更新逻辑都绑定对应下标的状态
• 更新状态时先拷贝原状态数组，修改对应下标的值后再整体更新，避免直接修改原状态导致的渲染异常

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