React中如何实现复选框最多选中3个的数量限制

你可以直接在原有受控复选框的代码基础上，加两层逻辑实现限制，不需要重构原有代码结构：

• 第一层：拦截超量的选中操作
  找到控制选中列表更新的onChange事件处理函数，新增判断逻辑：如果当前已选中项数量已经达到3个，且本次操作是要勾选新的未选项（不是取消已勾选项），直接终止逻辑不更新选中状态。
  核心代码示例：

  const handleCheckChange = (e) => {
    const { value, checked } = e.target;
    // 选满3个且要新增选中时直接拦截
    if (checked && checkedList.length >= 3) {
      return;
    }
    // 保留原有选中/取消的更新逻辑
    setCheckedList(prev => {
      return checked 
        ? [...prev, value] 
        : prev.filter(item => item !== value)
    })
  }
  

• 第二层：增加禁用状态优化交互
  只拦截点击会让用户觉得“点了没反应”，建议在渲染复选框时给超量后的未选项加disabled属性，选满3个后所有未选中的复选框直接置灰不可点击，取消任意已选项后自动恢复可点状态。
  核心代码示例：

  {
    optionList.map(option => (
      <label key={option.value}>
        <input
          type="checkbox"
          value={option.value}
          checked={checkedList.includes(option.value)}
          onChange={handleCheckChange}
          // 选满3个且当前项未选中时，禁用该选项
          disabled={checkedList.length >= 3 && !checkedList.includes(option.value)}
        />
        {option.label}
      </label>
    ))
  }
  

• 可选体验优化
  可以在复选框组旁边加提示文案，当已选数量达到3个时显示最多可选择3个选项，降低用户理解成本。

注意：不要只做点击拦截，必须配合disabled属性做状态反馈，否则会出现交互无响应的异常感知。

逻辑验证标准：

1. 选中数量小于3时，所有复选框可正常勾选、取消
2. 选中数量达到3个后，所有未选中的复选框自动置灰不可点击
3. 取消任意一个已选中的项后，未选项自动恢复可点击状态

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