React中如何实现checkbox每次仅选中一个并设置对应state值

问题原因 #

你现在的代码用同一个布尔状态check控制所有checkbox的选中状态，天然就没法实现单选逻辑，同时用了非受控的defaultChecked也会导致视图和状态不同步。

解决方案 #

不需要遍历所有checkbox手动取消选中，直接用已有的checkBoxValue状态做判断即可，单个checkbox是否选中，直接比对它的value和checkBoxValue是否相等就行，天然支持单选效果。

优化后代码 #

const [checkBoxValue, setCheckBoxValue] = React.useState(null);
// info可以直接从checkBoxValue推导，无需单独存储也不需要useEffect监听
const info = checkBoxValue;

const handleCheckboxChange = (e) => {
  const currentValue = e.target.value;
  // 点击已选中的选项则取消选中，否则更新为当前点击值
  setCheckBoxValue(currentValue === checkBoxValue ? null : currentValue);
}

return (
  <div>
    <label>
      <input
        value="Abed"
        type="checkbox"
        checked={checkBoxValue === "Abed"}
        onChange={handleCheckboxChange}
      />
      Abed!
    </label>
    <label>
      <input
        value="Fanny"
        type="checkbox"
        checked={checkBoxValue === "Fanny"}
        onChange={handleCheckboxChange}
      />
      Fanny!
    </label>
  </div>
);

改动说明 #

• 删掉冗余的check状态和useEffect逻辑，简化代码的同时避免多状态同步导致的bug
• 将非受控的defaultChecked改为受控属性checked，确保视图和React状态完全一致
• 统一的onChange逻辑兼顾了取消选中的交互，取值直接用e.target.value即可，无需读取attributes节点
• 后续如果要新增选项，只需要加对应的label和input，不需要修改逻辑，自动支持单选

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