React多输入框onChange值存入单个数组的实现及报错排查

嘿，我来帮你搞定这个问题！首先咱们拆解一下你遇到的两个核心问题：合成事件复用的警告，以及如何正确更新组件A的状态来同步输入框的值。

为什么会出现那个警告？ #

你看到的Warning: this synthetic event is reused...是因为React为了性能优化，会复用合成事件对象。当你在setState的函数式更新回调里访问e.target时，这个事件对象已经被React回收复用了，所以你拿到的是一个“失效”的对象，自然会抛出警告。

快速修复警告：提前保存事件属性 #

解决这个问题很简单，只需要在setState之前，把你需要的name和value从事件对象里提取出来存成变量，之后再在状态更新里用这些变量就好了。另外还要注意：你原来的setState第二个参数直接写了console.log(this.state)，这是不对的——因为setState是异步的，直接打印会拿到旧状态，得把打印逻辑放进回调函数里。

修改后的onMultipleChange代码如下：

onMultipleChange(e) {
  // 提前提取需要的属性，避免事件对象被回收后无法访问
  const { name, value } = e.target;
  console.log(name);

  this.setState((prevState) => {
    // 基于旧状态创建新的publicKeys对象
    const publicKeys = { ...prevState.publicKeys, [name]: value };
    return { ...prevState, publicKeys };
  }, () => {
    // 这里才能拿到更新后的最新状态
    console.log(this.state);
  });
}

关于“获取所有输入框值存入数组”的思路 #

你提到想通过获取div容器的子元素来批量更新状态，其实这种方式没必要，反而不如每个输入框单独触发onChange来更新对应的状态项高效——这样状态和输入框的值能实时同步，也不用手动操作DOM。

如果确实需要在某个时机（比如提交表单）一次性获取所有输入框的值，你之前写的动态ref是可行的，但要记得先初始化_refs对象：

constructor(props) {
  super(props);
  this.state = {
    publicKeys: {} // 或者数组，根据你的需求调整
  };
  this._refs = {}; // 初始化refs容器
}

// 你的动态ref设置函数可以保留
refSetter = (ix) => (ref) => {
  this._refs[ix] = ref;
};

// 比如提交时批量获取值
handleSubmit = () => {
  // 遍历refs拿到所有输入框的值
  const allValues = Object.values(this._refs).map(ref => ref.value);
  // 这里可以更新状态或者提交数据
  console.log('所有输入框的值:', allValues);
};

额外提示：状态结构的选择 #

从你的代码看，publicKeys是一个对象，用输入框的name作为键来存储值，这种结构很适合“顺序无关”的场景。如果确实需要用数组存储，只需要把更新逻辑改成操作数组即可（比如根据索引替换对应位置的值），核心思路还是一样的——提前保存事件属性，避免访问已回收的合成事件对象。

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