React + antd 中 的 CheckBox 实现限制复选框可选的个数_antd复选框只能选一个

React + antd 中 的 CheckBox 实现限制复选框可选的个数

一、React + antd 中 的 CheckBox 实现限制复选框可选的个数

1.优化后的代码 3行 实现：

代码如下（示例）：

import React, { useState } from "react";
import { Checkbox } from "antd-mobile";	// 这里使用的是 antd-mobile，antd本质上原理一样
const CheckboxItem = Checkbox.CheckboxItem;

export default function Demo() {
  const [num, setNum] = useState(0);
  const [data, setData] = useState([
      { value: 0, label: '第一', checked: true },
      { value: 1, label: '第二', checked: true },
      { value: 2, label: 'A', checked: true },
      { value: 3, label: 'B', checked: true },
      { value: 4, label: 'C', checked: true },
      { value: 5, label: 'D', checked: true },
      { value: 6, label: 'E', checked: true },
    ]);

  return (
    <>
      {data.map((item, i) => (
        <CheckboxItem
          style={{ display: "flex" }}
          disabled={num < 2 ? false : item.checked}	// 选中个数小于2个，则默认false，否则为 true
          key={item.value}
          onChange={() => {
            data[i].checked = !data[i].checked	// 单击会改变 data 中 checked 的状态
            const arr = data.filter(it => !it.checked)	// 筛选出 checked 为 false 的个数
            setNum(arr.length)	// 筛选后的数组中 checked === true 的个数保存状态
          }}
        >
          {item.label}
        </CheckboxItem>
      ))
      }
    </>
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

2.读入数据

实现效果：

1. 未选择时显示全部可选：

2. 选中任意2个后，第三个则不可选

3. 取消任意一个，则又可以选择其他

4. 任意选择一个后，又不可选

精简一下，onChange 实现逻辑可以为 2 行实现：

代码如下（示例）：

  data[i].checked = !data[i].checked
  setNum(data.filter(it => !it.checked).length)
1
2

总结

我会分享一些可能生产中相对实用的开发小经验。
人生格言：只要我足够卷，我的未来就没有上限。