React TypeScript 实现列表中多复选框单选互斥效果

核心实现思路：放弃每个复选框独立维护自身选中状态的写法，在父组件层级用单一状态记录当前唯一选中项的标识，所有复选框的选中态完全由这个统一状态控制，点击任意复选框时直接更新该状态为当前点击项即可。

具体实现步骤 #

• 定义统一选中状态：在父组件中声明状态存储当前选中项的唯一ID，初始值设为null表示默认无选中项，示例代码：const [selectedId, setSelectedId] = useState<string | null>(null)
• 受控绑定复选框属性：遍历渲染复选框列表时，给每个复选框传入两个核心属性
  • checked：当前项ID与selectedId相等时返回true（选中），否则返回false（未选中）
  • onChange：点击触发时直接更新selectedId为当前项ID；如果需要支持点击已选中项取消全选的效果，加一层判断：若当前项ID已经等于selectedId，则将selectedId重置为null

参考代码（React + TS） #

import { useState } from 'react';
// 引入项目中自定义的Checkbox组件
import Checkbox from './components/Checkbox';

// 复选框列表配置数据
const checkOptions = [
  { id: 'opt1', label: 'Checkbox 1' },
  { id: 'opt2', label: 'Checkbox 2' },
  { id: 'opt3', label: 'Checkbox 3' },
];

export default function App() {
  const [selectedId, setSelectedId] = useState<string | null>(null);

  const handleItemCheck = (id: string) => {
    // 不需要取消选中能力的话，直接写 setSelectedId(id) 即可
    setSelectedId(prev => prev === id ? null : id);
  };

  return (
    <div className="checkbox-container">
      {checkOptions.map(opt => (
        <Checkbox
          key={opt.id}
          label={opt.label}
          checked={selectedId === opt.id}
          onChange={() => handleItemCheck(opt.id)}
        />
      ))}
    </div>
  );
}

补充提示：如果业务没有强制要求复选框样式做单选，优先使用原生<input type="radio">并给同组单选项设置相同的name属性，浏览器原生自带互斥选中逻辑，无障碍访问兼容性更好。只有当UI明确要求复选框样式、或需要点击已选项取消全选的场景，再使用上述受控实现方案。

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