React中event.target.id无法获取元素ID问题求助

看起来你的核心问题是切换单选按钮时，无法正确获取选中选项的ID并同步更新到state中。我帮你梳理下可能的原因和对应的解决办法：

1. event.target指向错误或合成事件复用问题 #

React的合成事件对象会在回调结束后被池化复用，另外RadioGroup的onChange事件中，event.target大概率指向的是组组件本身，而非你选中的单个单选按钮——这直接导致你拿不到对应选项的ID。

解决办法：精准获取选中的单选按钮元素 #

假设你的单选选项结构是每个按钮都有独立id：

<RadioGroup 
  aria-label="quiz" 
  name="feeding" 
  value={this.state.group.feeding}
>
  <Radio id="feeding-opt-1" value="opt1" label="Option 1" />
  <Radio id="feeding-opt-2" value="opt2" label="Option 2" />
  {/* 更多选项 */}
</RadioGroup>

你可以在RadioGroup的onChange回调中，通过选中的值定位到对应的单选按钮元素，进而提取它的ID：

onChange={(event) => {
  const selectedValue = event.target.value;
  // 根据name和value精准找到选中的单选框
  const selectedRadio = document.querySelector(`input[name="feeding"][value="${selectedValue}"]`);
  const selectedId = selectedRadio ? selectedRadio.id : '';

  // 合并状态更新，避免多次setState的异步冲突
  this.setState(prevState => ({
    group: { ...prevState.group, feeding: selectedValue },
    id: { ...prevState.id, feeding: selectedId }
  }), () => {
    // 在状态更新完成的回调中执行后续逻辑
    this.updateTotal(event);
    // 直接传入整理好的参数，避免依赖可能出问题的event对象
    this.updateID({ target: { id: selectedId, name: 'feeding' } });
  });
}}

2. 多次setState导致的状态不一致 #

你原代码中连续调用了三次setState（更新group、更新id、updateID内的setState），而React的setState是异步批量更新的，这会导致状态更新顺序不可控，出现拿不到最新状态的情况。

解决办法：合并状态更新操作 #

上面的代码已经把group和id的更新合并到一个setState调用中，同时利用setState的回调函数（第二个参数）执行后续逻辑，确保状态更新完成后再触发updateTotal和updateID。

3. 优化updateID函数 #

你的updateID逻辑本身是正确的，但可以简化并避免依赖不稳定的event对象：

updateID = ({ id, name }) => {
  console.log("IDFEEDING::" + this.state.id.feeding);
  console.log("HereID::" + id + "," + name);
  this.setState(prevState => ({
    id: { ...prevState.id, [name]: id }
  }));
}

调用时直接传入id和name参数，就不需要再从event中提取了。

验证效果 #

修改后切换单选按钮，应该能正确获取选中选项的ID并同步更新到this.state.id.feeding中。你可以在setState的回调里打印this.state.id.feeding来验证更新结果。

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