React JS中如何实现勾选超过1个复选框时禁用按钮的功能

原来的单布尔值状态无法追踪每个复选框的勾选情况，因此无法统计勾选数量，我们需要将状态替换为数组，单独记录每个复选框的勾选状态，再通过勾选数量判断按钮是否禁用。

完整实现代码 #

import React from "react";
import "./styles.css";
import { useState } from 'react'

export default function App() {
  // 数组存储每个复选框的勾选状态，初始三个都为未勾选
  const [checkedList, setCheckedList] = useState([false, false, false]);

  // 接收复选框索引，更新对应位置的勾选状态
  const handleCheckChange = (index) => {
    const newCheckedList = [...checkedList];
    newCheckedList[index] = !newCheckedList[index];
    setCheckedList(newCheckedList);
  };

  // 计算勾选数量，仅当恰好1个勾选时按钮启用
  const checkedCount = checkedList.filter(Boolean).length;
  const isButtonDisabled = checkedCount !== 1;

  return (
    <div className="App">
      <button disabled={isButtonDisabled}>Click Me</button>

      <input 
        type="checkbox" 
        onChange={() => handleCheckChange(0)}
        checked={checkedList[0]}
      />
      <input 
        type="checkbox" 
        onChange={() => handleCheckChange(1)}
        checked={checkedList[1]}
      />
      <input 
        type="checkbox" 
        onChange={() => handleCheckChange(2)}
        checked={checkedList[2]}
      />
    </div>
  );
}

逻辑说明 #

• 状态用数组存储，每个元素对应一个复选框的勾选状态，后续需要增减复选框数量时，只要修改useState初始数组的长度即可
• 每次勾选操作只更新对应索引位置的状态，不会影响其他复选框的状态
• 按钮禁用逻辑同时匹配所有需求：
  • 勾选数量为0时，按钮禁用
  • 勾选数量≥2时，按钮禁用
  • 仅勾选数量恰好为1时，按钮激活

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