React动态表单：多输入框值的状态存储及supply_detail_handler实现问询

我来帮你搞定这个动态输入框的状态存储问题！咱们先理清楚当前代码的小问题：你用bind(index)传递索引，但没法区分输入的是text还是val字段，而且状态更新的逻辑也需要遵循React的不可变更新原则（不能直接修改原状态对象）。

下面是完整的解决方案：

1. 调整事件绑定逻辑 #

首先在JSX的输入框里，把onChange改成直接传递索引和字段类型，这样处理函数能明确知道要更新哪个位置的哪个字段：

<div className='addNewInput' onClick={addNewSuppDetailInput}>+</div>
{ supply_detail_data.suppCashDetail.map((el,index) => {
  return (
    <div key={index}>
      •<input 
          type='text' 
          value={el.text || ''} 
          onChange={(e) => supply_detail_handler(e, index, 'text')} 
        />
      <input 
          type='number' 
          value={el.val || ''} 
          onChange={(e) => supply_detail_handler(e, index, 'val')} 
        />
    </div>
  );
}) }

2. 实现supply_detail_handler函数 #

这个函数需要做三件事：

• 获取输入框的新值
• 复制原状态数组（避免直接修改原状态）
• 更新对应索引的对应字段，然后设置新状态

function supply_detail_handler(event, index, field) {
  // 获取输入框的新值
  const newValue = event.target.value;
  
  // 复制原数组，遵循不可变更新原则
  const updatedSuppCashDetail = [...supply_detail_data.suppCashDetail];
  
  // 更新对应索引的对应字段
  updatedSuppCashDetail[index] = {
    ...updatedSuppCashDetail[index],
    [field]: newValue
  };
  
  // 设置新状态
  setSupply_detail_data({
    ...supply_detail_data,
    suppCashDetail: updatedSuppCashDetail
  });
}

3. 优化状态初始化（可选） #

如果初始状态不需要嵌套数组的话，可以简化一下，让结构更清晰：

const [supply_detail_data, setSupply_detail_data] = React.useState({ 
  suppCashDetail: [{text: '', val: ''}] 
});

为什么要这么做？ #

• 不可变更新：React状态是只读的，直接修改原状态不会触发组件重新渲染，所以必须复制原数组/对象后再修改
• 明确参数传递：通过传递index和field，处理函数能精准定位要更新的状态字段，避免混淆text和val输入框的值
• 避免bind的潜在问题：直接在onChange里传箭头函数，比bind更直观，也不会有this指向的问题

这样修改后，不管用户点击多少次“+”生成新输入框，每个输入框的值都会正确同步到React状态里啦！

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