React中如何获取map函数渲染的输入框触发onChange时的输入值

实现方案 #

你只需要在handleChange中按不可变规则更新objects数组即可，完整代码逻辑如下：

1. 补全handleChange方法

handleChange(index, id, e) {
  const inputVal = e.target.value;
  // 浅拷贝原state数组，避免直接修改state源数据
  const updatedObjects = [...this.state.objects];
  // 对应索引位置写入你需要的对象格式
  updatedObjects[index] = {
    value: inputVal,
    id: id
  };
  // 如果你确实需要用index作为值的键名，就替换成下面的写法
  // updatedObjects[index] = {
  //   index: inputVal,
  //   id: id
  // };
  this.setState({
    objects: updatedObjects
  });
}

2. 修正input的value属性

由于现在objects数组中存储的是对象，你原来写的value={this.state.objects[index]}会直接渲染对象，需要调整为取对应属性：

<input
  key={index}
  value={this.state.objects[index]?.value || ''}
  onChange={this.handleChange.bind(this, index, item.id)}
/>

如果你上一步用了index作为值的键名，这里就改成this.state.objects[index]?.index || ''即可。

可选优化：初始化state避免空值问题

如果渲染用的items初始就确定（比如是props传入的固定列表），可以在构造函数中提前初始化objects数组，避免第一次渲染时出现undefined：

constructor(props) {
  super(props);
  // 假设items是props传入的，替换成你实际的items来源即可
  this.state = { 
    objects: props.items.map(item => ({ value: '', id: item.id })) 
  };
}

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