React中RadioGroup切换选中状态时onChange事件不触发是什么原因

问题根因&修复方案 #

以下是代码中导致onChange不触发的几个核心错误：

• 属性名传递不匹配
  你给RadioGroup组件传递的回调属性是onChange={this.onRadioChange}，但RadioGroup内部克隆子元素时，绑定的是props.handleChange，两个属性名完全不一致，导致单选框的onChange实际为undefined，自然不会触发回调。
  修复：将RadioGroup内部的onChange: props.handleChange改为onChange: props.onChange。
• 事件处理函数被错误覆盖
  构造函数中的this.onRadioChange = this.onRadioChange(this)代码，是直接调用了onRadioChange函数，将它的返回值（默认是undefined）赋值给了实例的onRadioChange属性，相当于直接清空了事件处理函数。且onRadioChange本身是类属性箭头函数，自带this绑定，不需要手动执行绑定操作。
  修复：直接删除构造函数中this.onRadioChange = this.onRadioChange(this)这行代码即可。
• 受控属性使用错误
  你当前给单选框设置的是defaultChecked，这个属性仅在组件首次渲染时生效，后续props更新不会同步选中状态，属于非受控组件用法。如果要实现选中状态和RadioGroup的value属性联动，需要替换为受控属性checked。
  修复：将RadioGroup内部的defaultChecked: props.value === child.props.value改为checked: props.value === child.props.value。
• value属性取值逻辑颠倒
  你给RadioGroup传的value属性的三元判断逻辑写反了：当前判断如果answer为undefined，就返回这个undefined值，有值时反而去全局遍历查找，会导致取值异常。
  修复：将三元判断的条件改为typeof this.state.questions[question.id].answer !== "undefined"即可。

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