React中批量设置输入框值后，如何允许单个输入框独立清空？

问题重现 #

你当前的代码逻辑是用单个状态material控制所有循环生成的输入框：

const [material, setMaterial] = useState("")

// 全局批量设置输入框的输入
<input type="text" onChange={(e)=>setMaterial(e.target.value)}>

// 循环生成的100个输入框，全部绑定同一个material状态
<input type="text" value={material}>
<input type="text" value={material}>
<!-- ... 共100个 -->

问题在于：当material有值时，你无法单独清空某个输入框——即使手动删除内容，输入框的value始终被material状态强制覆盖，删到最后会直接重置回material的值。

解决方案：给每个输入框维护独立状态 + 支持批量更新 #

核心思路是把单个全局状态改成数组状态，每个元素对应一个输入框的独立值，同时保留全局输入框的批量设置功能：

import { useState } from 'react';

function InputGroup() {
  // 初始化100个空字符串，对应100个输入框的独立状态
  const [inputValues, setInputValues] = useState(Array(100).fill(""));

  // 全局批量设置所有输入框的值
  const handleGlobalChange = (e) => {
    const globalValue = e.target.value;
    // 生成新数组，所有元素替换为全局输入的值
    setInputValues(Array(100).fill(globalValue));
  };

  // 单个输入框的独立更新逻辑
  const handleSingleInputChange = (index, e) => {
    const newValues = [...inputValues];
    newValues[index] = e.target.value;
    setInputValues(newValues);
  };

  return (
    <div>
      {/* 全局批量设置输入框 */}
      <input type="text" onChange={handleGlobalChange} placeholder="批量设置所有输入框" />

      {/* 循环生成100个独立可控的输入框 */}
      {inputValues.map((value, index) => (
        <input
          key={index}
          type="text"
          value={value}
          onChange={(e) => handleSingleInputChange(index, e)}
          style={{ margin: '0 5px 5px 0' }}
        />
      ))}
    </div>
  );
}

关键说明 #

1. 独立状态管理：用数组inputValues存储每个输入框的单独值，每个输入框只绑定自己对应的数组元素，不会被其他输入框或全局状态强制覆盖。
2. 批量更新兼容：全局输入框的handleGlobalChange会生成一个全量替换的新数组，实现“一键设置所有输入框”的需求。
3. 自由编辑/清空：每个输入框都有自己的onChange逻辑，无论全局状态是否有值，都可以单独修改或清空任意输入框的内容，不会被重置。

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