React-Bootstrap ToggleButtonGroup的onChange事件失效问题求助

我之前也踩过这个坑！其实React-Bootstrap的ToggleButtonGroup组件的onChange事件设计很贴心，它直接把选中的value作为第一个参数返回，根本不需要你去从event.target里掏值——这也是为什么你用event.target拿不到的原因，因为触发事件的确实是父容器元素，而不是单个的ToggleButton。

咱们直接调整代码就能搞定，把事件处理逻辑改成这样：

<ToggleButtonGroup 
  type="radio" 
  name="detect" 
  defaultValue={1} 
  onChange={(selectedValue) => this.onInputMethodChange(selectedValue)}
>
  <ToggleButton value={1}>Translate</ToggleButton>
  <ToggleButton value={2}>Detect</ToggleButton>
</ToggleButtonGroup>

对应的onInputMethodChange方法也能简化，直接接收这个value就行：

onInputMethodChange = (selectedValue) => {
  console.log('选中的值是:', selectedValue);
  // 这里写你的业务逻辑...
};

如果非要绕路通过event获取（真心不推荐），你可以尝试用event.currentTarget定位到对应的ToggleButton元素，但完全没必要舍近求远，官方已经把选中值直接递到你手里了。

总结一句：ToggleButtonGroup的onChange回调第一个参数就是选中的value，直接用它就完事，别再死磕event.target啦！

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