ReactJS如何获取动态生成的多个输入框的值？

嘿，你已经把动态输入框的UI部分搭起来了，这步走得很对！要拿到每个输入框的值其实非常直接——因为你已经把输入框和state里的values数组做了绑定，接下来只需要完善状态更新逻辑，然后直接从state里取值就行。

第一步：完善handleChange函数 #

你已经在onChange里传递了输入框的索引i，这正好可以用来定位要更新的数组元素。注意永远不要直接修改state，要先复制原数组再更新，然后通过setState同步状态：

handleChange = (index, e) => {
  // 浅拷贝原values数组，避免直接修改state
  const updatedValues = [...this.state.values];
  // 根据索引更新对应位置的输入值
  updatedValues[index] = e.target.value;
  // 更新state
  this.setState({ values: updatedValues });
};

如果你的每行有多个输入框（比如代码里的Name和另一个未写完的输入），那values应该是对象数组而不是字符串数组，这样才能区分每个字段。比如初始state可以设为：

this.state = {
  values: [{ name: '', otherField: '' }]
};

对应的handleChange要多传一个字段名参数：

// 输入框的onChange改成这样：
onChange={this.handleChange.bind(this, i, 'name')}
// 另一个输入框则传'otherField'

handleChange = (index, field, e) => {
  const updatedValues = [...this.state.values];
  updatedValues[index][field] = e.target.value;
  this.setState({ values: updatedValues });
};

输入框的value属性也要改成el.name或者el.otherField。

第二步：获取所有输入框的值 #

当你需要使用这些值（比如提交表单）时，直接从this.state.values里读取就可以了——它已经实时同步了所有输入框的内容：

handleSubmit = () => {
  const allInputValues = this.state.values;
  console.log('所有输入框的值：', allInputValues);
  // 这里可以把allInputValues传给后端接口，或者做其他业务处理
};

举个例子，如果是对象数组的结构，allInputValues会是类似[{ name: '张三', otherField: 'xxx' }, { name: '李四', otherField: 'yyy' }]的格式，完全可以直接用。

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