React中如何实现可变数量的受控输入框相互独立不联动

问题原因 #

你当前所有输入框共用了同一个input状态变量，任意输入框修改都会更新这个全局状态，所有绑定了这个状态的输入框都会同步变更。同时你生成的数组元素全为0，遍历时用元素值作为key属于重复key，也会导致React渲染异常。

解决方案 #

把状态改为数组类型，数组每个下标对应一个输入框的值，修改时只更新对应下标的状态即可：

1. 初始化数组类型的状态，长度和你动态生成的输入框数量匹配：

const numberVariable = 3;
// 初始化状态为对应长度的空值数组
const [inputArr, setInputArr] = useState(Array(numberVariable).fill(''));

2. 遍历渲染输入框时，每个输入框绑定对应下标的值，修改时单独更新对应下标内容：

inputArr.map((val, index) => {
  return (
    <div key={index}>
      <InputUser 
        value={val} 
        onChange={(e) => {
          // 拷贝原数组避免直接修改状态
          const newArr = [...inputArr];
          newArr[index] = e.target.value;
          setInputArr(newArr);
        }}
      />
    </div>
  );
})

3. 如果后续输入框数量需要动态调整，修改inputArr的长度即可：新增输入框就往数组末尾追加空值，删除输入框就移除对应下标的元素。

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