React单选按钮需点击两次才更新状态的原因排查

嘿，我来帮你搞定这个问题！你的单选按钮需要点击两次才生效，罪魁祸首就是handleOptionChange里的event.preventDefault()，咱们一步步拆解：

问题根源 #

单选按钮有个原生默认行为：当用户点击它时，浏览器会自动将其标记为「选中」状态。但你在回调里调用了event.preventDefault()，直接阻止了这个浏览器的原生操作。

第一次点击时发生的事：

• 触发onChange回调，成功更新了组件state里的teacher_role（你可以看console.log的输出，此时state已经变化了）
• 但浏览器被阻止了标记按钮为选中的操作，所以界面上看不到任何变化
  第二次点击时：
• state已经是新值，组件重新渲染时checked属性和当前state匹配
• 这次点击的默认行为正常生效，界面终于显示出选中状态

修复方案 #

直接删掉event.preventDefault()就行，因为单选按钮的onChange事件完全不需要阻止默认行为：

handleOptionChange(event){
  // 移除这行多余的代码！event.preventDefault();
  let { name, value } = event.target;
  this.setState( { [name]:value } );
}

修改后，第一次点击单选按钮时，浏览器会同时完成「标记选中」和「更新state」两个操作，界面就能实时同步状态了。

额外优化小建议 #

你可以用箭头函数简化this的绑定，不用在constructor里手动bind：

class CompleteProfile extends Component{
  state = { teacher_role:'subject' }; // 直接用类属性初始化state

  handleOptionChange = (event) => { // 箭头函数自动绑定this
    let { name, value } = event.target;
    this.setState( { [name]:value } );
  }

  // ... 其余代码保持不变
}

这样代码更简洁，也避免了手动bind可能带来的失误。

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