基于antd form的带全选的checkbox封装

当我们在使用 Checkbox 的时候，如果只是几个选项，那或许不需要全选按钮

但如果你使用的是 checkbox.Group，那么我想你一定需要一个全选按钮，不然你的产品经理不会放过你的！（作为一个负责任的前端人，当然产品不说，我们也要主动提出来，这是优化体验的好交互）

其实 antd 已经考虑了这一点，并且有一个 demo：Antd demo 搜索全选即可，你可能会用到 indeterminate 属性。但是这是一个 demo 嘛，通常我们都要和 Form 结合来使用，所以我们基于这个 demo 稍微封装一下就可以了。

效果如下，主要是自己再实现 value 和 onchange 让 antd 的 form 可以收集到值，以及借助 indeterminate 属性完成全部反选的联动效果。

下面上代码：其实非常简单，主要关注 value，onchange 即可，只要使用 Form.Item 包裹组件 antd 会传入 value 和 onchange，我们需要将 value 绑定在 ChechboxGroup 上，

import React, { useState } from 'react';
import { Checkbox } from 'antd';
const CheckboxGroup = Checkbox.Group;

const AllCheckbox = (props) => {
  const { value, onChange, valueOptions, isDisable, allCheckProps, checkboxGroupProps } = props
  const disable = isDisable || false;
  const checkAll = valueOptions?.length === value?.length;
  const indeterminate = value?.length > 0 && value?.length < valueOptions?.length;

  const onCheckedListChange = (list) => {
    onChange(list);
  };
  const onCheckAllChange = (e) => {
    onChange(e.target.checked ? valueOptions?.map((item) => item.value) : []);
  };

  return (
    <div style={{display:'flex',flexDirection:'column'}}>
        <Checkbox
          disabled={disable}
          indeterminate={indeterminate}
          onChange={onCheckAllChange}
          checked={checkAll}
          style={{marginBottom: 12}}
          {...allCheckProps}
        >
          全选
        </Checkbox>
        <CheckboxGroup
          disabled={disable}
          options={valueOptions}
          value={value}
          onChange={onCheckedListChange}
          {...checkboxGroupProps}
        />
    </div>
  );
};
export default AllCheckbox;

然后可以看到我们开了 3 个变量，

disable:控制禁用状态，禁用时传入 true 即可，不传就是 false，

checkAll:全选按钮的控制器，根据 option 的数量和选中的数量是否相等来判断

indeterminate:antd 实现的全选半选联动控制，传入一个 boolean，当选中了值，且选中数量小于全部属性则为半选

接下来就是两个组件的 onchange 实现：

onCheckedListChange:很简单 checkboxGroup 的值变化，把最新的值 onchange 抛出去，antd form 会接受到。

onCheckAllChange:这里会稍微复杂点，需要根据全选按钮的状态设置 all list 或者清空数据

最后可以看到我们预留了两个 props，因为我们目前封装组件可能只需要满足当前的业务逻辑或者考虑不全面，我们留两个 props，只要我们传入 props 就可以实现对组件的覆盖或者新增配置，当然如果需求确定了，可以根据需求改动这个组件。

使用方法，很简单用一个 Form.Item包裹起来就可以了，给Form.Item 设置好 name 以便 form 能顺利收集到 value。

const getTestOptions = () => {
	const a = [1,2,2,3,3,1,31,31,3,1,3,1,31,1,31]
	return a.map((item, index) => { return {value:index, label:`测试${index}`}})
}

<Form.Item name={['nodes']}
	label={'多选测试'}
	rules={[{ required: true }]}
>
	<AllCheckbox valueOptions={getTestOptions() || []}/>
</Form.Item>