React.js中单选按钮handleChange事件无法正确触发的问题排查

核心问题分析 #

你的代码存在三个关键问题，导致单选按钮状态无法正确同步：

1. 状态更新的异步性误导日志
   React的setFormData是异步操作，在handleChange里直接console.log(formData)输出的是更新前的旧状态，并非实时更新后的值，这会让你误以为状态没变化。

2. 单选按钮与文本绑定错误
   gender字段的单选按钮没有用<label>包裹文本，也未正确关联标签与输入框：

• 点击"Male"/"Female"文本时无法触发单选按钮的onChange事件，只有点击按钮本身才有效；
• <input>上的htmlFor属性是无效的，该属性属于<label>，用于关联对应<input>的id。

3. 重复ID与非受控组件问题
   多个字段的单选按钮使用了重复的id="yes"/id="no"，违反HTML唯一ID规则；同时部分单选按钮未设置checked属性，导致控件处于非受控状态，无法同步到formData。

修复步骤 #

1. 修复状态日志查看方式

替换handleChange里的直接console.log，改用useEffect监听formData变化，查看实时状态：

React.useEffect(() => {
  console.log("最新表单状态:", formData);
}, [formData]);

2. 正确绑定单选按钮与文本

将单选按钮和对应文本包裹在<label>内，或通过htmlFor关联，同时移除<input>上无效的htmlFor属性：

<p id="gender">What is your gender?</p>
<label htmlFor="male">
  <input type="radio" id="male" name="gender" value="1" onChange={handleChange} checked={formData.gender === "1"}/>
  Male
</label>
<label htmlFor="female">
  <input type="radio" id="female" name="gender" value="0" onChange={handleChange} checked={formData.gender === "0"}/>
  Female
</label>

3. 统一设置所有单选按钮的受控状态

给所有单选按钮添加checked绑定，并确保每个按钮的id唯一：

// 以Polydipsia字段为例
<p>Do you suffer from Polydipsia?</p>
<p>If you are unfamiliar, read about Polydipsia <a href="#">here</a></p>
<label htmlFor="polydipsia-yes">
  <input type="radio" id="polydipsia-yes" name="polydipsia" value="1" onChange={handleChange} checked={formData.polydipsia === "1"}/>
  Yes
</label>
<label htmlFor="polydipsia-no">
  <input type="radio" id="polydipsia-no" name="polydipsia" value="0" onChange={handleChange} checked={formData.polydipsia === "0"}/>
  No
</label>

修复后效果 #

完成上述修改后，单选按钮的状态会正确同步到formData，点击文本即可选中对应选项，通过useEffect能看到实时更新的表单状态。

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