ReactJS+Vite批量设置输入框值后onChange未触发的解决需求

当前问题核心：主输入框仅更新了全局material状态，但循环生成的输入框对应的表单数据（每个物料项的Material字段）未被实际修改，导致保存时表单数据仍为原始空值；同时因为没有手动触发输入框的onChange，值无法同步到表单提交状态中。

解决方案 #

直接修改表单数据状态，确保批量设置的值同步到每个空物料输入框对应的表单字段中，无需依赖手动触发输入框onChange。

1. 修改主输入框的onChange逻辑

假设表单数据存储在formData状态中，在主输入框输入时遍历表单数组，更新所有空的Material字段：

<input
  type="text"
  name="setValues"
  placeholder="Set Values"
  onChange={(e) => {
    const batchValue = e.target.value;
    // 遍历表单数组，仅更新空的Material字段
    const updatedItems = formData.map(item => {
      return !item.Material ? { ...item, Material: batchValue } : item;
    });
    setFormData(updatedItems);
    // 若仍需全局material状态用于其他场景，可保留此行
    setMaterial(batchValue);
  }}
/>

2. 调整循环输入框的value绑定

让输入框直接绑定到表单数组对应项的Material字段，确保显示与表单状态完全同步：

{formData.map((item, index) => (
  <tr key={index}>
    <td>
      <input
        name="material"
        type="text"
        value={item.Material || ''}
        onChange={(event) => handleChange(event, index, "Material")}
      />
    </td>
  </tr>
))}

3. 确保handleChange正确更新表单数组

handleChange需要负责更新指定索引的表单字段值：

const handleChange = (event, index, field) => {
  const newValue = event.target.value;
  setFormData(prevData => {
    const newData = [...prevData];
    newData[index] = { ...newData[index], [field]: newValue };
    return newData;
  });
};

修改后，主输入框设置的值会直接写入表单数据的对应字段，保存时就能获取到批量设置的最新值，无需依赖手动触发每个输入框的onChange事件。

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