React中如何让Checkbox列表实现Radio Button的单选效果？

要让这些Checkbox实现单选功能，核心思路是只追踪当前选中的项ID，而不是给每个项单独维护checked状态，具体修改步骤如下：

1. 调整状态结构 #

把原来存储每个项checked状态的数组，改成只存储当前选中项的ID（初始值设为null表示未选中任何项）：

const [selectedId, setSelectedId] = useState(null);

2. 修改点击事件处理函数 #

点击某个Checkbox时，直接将selectedId设置为当前项的ID，保证同一时间只有一个项被选中；如果需要支持点击已选中项取消选中，可加判断逻辑：

const handleCheck = (id) => {
  // 点击已选中项时取消选中，若强制必须选一个则直接执行 setSelectedId(id)
  setSelectedId(selectedId === id ? null : id);
};

3. 更新渲染逻辑 #

每个Checkbox的checked属性，判断当前项的ID是否等于selectedId即可：

<input
  type="checkbox"
  checked={item.id === selectedId}
  onChange={() => handleCheck(item.id)}
/>

修改后的完整代码 #

import { useState } from "react";

const Checkbox = () => {
  // 维护当前选中项的ID，初始为null表示未选中
  const [selectedId, setSelectedId] = useState(null);
  
  const items = [
    { id: 1, item: "apple" },
    { id: 2, item: "bananna" },
    { id: 3, item: "cherry" },
    { id: 4, item: "dragon fruit" }
  ];

  const handleCheck = (id) => {
    // 点击已选中的项时取消选中，若不需要取消则直接setSelectedId(id)
    setSelectedId(selectedId === id ? null : id);
  };

  return (
    <div>
      <ul>
        {items.map((item) => (
          <li key={item.id}>
            <input
              type="checkbox"
              checked={item.id === selectedId}
              onChange={() => handleCheck(item.id)}
            />
            <label>{item.item}</label>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Checkbox;

关键说明 #

• 状态从维护每个项的checked改为维护选中ID，减少了状态复杂度，更贴合单选逻辑。
• 原代码中的lable是拼写错误，已修正为label。

内容的提问来源于stack exchange，提问作者prabahar.L