React中如何实现允许用户点击取消已选中的单选按钮

最简洁的实现方式是通过受控组件模式接管原生radio的选中状态，不需要修改checkbox逻辑，也无需新增额外操作按钮，代码量小且保留原生radio的无障碍特性。

核心实现逻辑 #

• 用React state存储当前选中的单选值，初始值设为null表示无选中状态
• 拦截单选按钮的点击事件：如果点击的选项和当前已选中值一致，就清空选中态；如果不一致，就更新为当前点击的选项值
• 完全由state控制每个radio的checked属性，屏蔽原生radio默认的不可取消选中行为
• 给受控radio传入空onChange函数，避免React抛出受控组件未绑定变更事件的警告

可直接运行的代码示例 #

import { useState } from 'react';

export default function CancelableRadioGroup() {
  // 存储当前选中项，初始无选中
  const [selectedValue, setSelectedValue] = useState(null);
  
  // 单选选项配置，可根据业务替换
  const options = [
    { label: '选项1', value: 'val1' },
    { label: '选项2', value: 'val2' },
    { label: '选项3', value: 'val3' }
  ];

  const handleRadioClick = (e) => {
    const currentClickVal = e.target.value;
    setSelectedValue(prev => prev === currentClickVal ? null : currentClickVal);
  };

  return (
    <div className="radio-wrap">
      {options.map(opt => (
        <label key={opt.value} style={{ marginRight: '20px', cursor: 'pointer' }}>
          <input
            type="radio"
            name="businessRadio" // 保持原生radio的name分组属性，保证键盘操作正常
            value={opt.value}
            checked={selectedValue === opt.value}
            onClick={handleRadioClick}
            onChange={() => {}} // 受控组件要求必填，空函数不影响逻辑
          />
          {opt.label}
        </label>
      ))}
    </div>
  );
}

补充说明 #

• 该方案保留原生radio的所有默认交互：包括键盘方向键切换选项、屏幕阅读器识别等，比改造checkbox为单选的方案维护成本低很多，不需要额外补单选互斥、无障碍适配的逻辑
• 如果使用Ant Design、MUI等第三方组件库，逻辑完全通用，只需要把原生input替换为对应组件库的Radio组件，将选中判断、点击处理函数绑定到组件对应的属性上即可
• 不推荐改造checkbox实现单选：需要自行实现选项互斥逻辑、键盘导航适配、无障碍属性补全，代码冗余度更高，容易出交互bug

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