Radio单选框怎么绑定状态才不会失效？

慧青 Dev 提问于 2026-02-26 09:20:23 阅读 21

组件

我用React写了个表单，Radio选了之后状态没更新，还是空的，怎么回事？

我试过用useState存值，onChange也绑了，但点了没反应，控制台也不报错。代码大概长这样：

const [gender, setGender] = useState('');

return (
  <div>
    <label><input type="radio" value="male" onChange={e => setGender(e.target.value)} /> 男</label>
    <label><input type="radio" value="female" onChange={e => setGender(e.target.value)} /> 女</label>
    <p>当前选中：{gender}</p>
  </div>
);

是不是漏了什么关键属性？感觉逻辑没错啊……

Radio单选框表单组件

我来解答赞 6 收藏

反馈

1 条解答

开发者尚萍 Lv1

你这代码其实缺了个关键属性：checked。

React 里的 radio 是受控组件，光靠 onChange 不行，必须同时给每个 radio 绑定 checked 属性，告诉它「当前是不是选中状态」，否则 React 的 diff 机制会把你的点击事件「吃掉」——表面看点了，其实没触发更新逻辑，尤其在某些版本或组合使用第三方库时更容易踩这个坑。

你现在的写法，浏览器虽然能点，但 React 根本没意识到状态变了，所以 gender 始终是初始值 ''。

改成这样就正常了：

const [gender, setGender] = useState('');



return (

  <div>

    <label>

      <input

        type="radio"

        value="male"

        checked={gender === 'male'}

        onChange={e => setGender(e.target.value)}

      /> 男

    </label>

    <label>

      <input

        type="radio"

        value="female"

        checked={gender === 'female'}

        onChange={e => setGender(e.target.value)}

      /> 女

    </label>

    <p>当前选中：{gender}</p>

  </div>

);

核心就是每个 radio 都要加上 checked={gender === '某个值'}，这样状态才能对得上，React 才知道该渲染成选中还是未选中状态。

顺便一提，如果你用的是 antd 或 element-plus 这类 UI 库的 Radio 组件，它们一般会自动处理 checked，但原生 input 就必须手动加——这点和 checkbox 组合类似，都得自己管住状态。

2026-02-26 10:01