antd中Select下拉框全选、全不选的处理方法

Select组件的dropdownRender属性，可以扩展下拉菜单。
我们只需要在这个属性中编辑代码，将操作区域用Divider组件与选项分离开即可。
这里我用的是formik.js管理表单状态的，不是本文重点。

逻辑代码：

import { useFormikContext } from 'formik';
const { setFieldValue } = useFormikContext();

UI部分：

	<Select
      style={{ width: 300 }}
      placeholder="custom dropdown render"
      dropdownRender={menu => (
        <>
          {menu}
    	  <Divider style={{ margin: '2px 0' }} />
	      <div style={{ padding: '2px 8px' }} onMouseDown={(e) => e.preventDefault()}>
	        <Button
	          type="link"
	          onClick={() => {
	            // 全选逻辑，设置该项表单的值
	            setFieldValue(
	              'cardTypeList',
	               options.map((item) => item.value)
            	);
	          }}
	          style={{ marginRight: '10px' }}
	        >
	          全选
	        </Button>
	        <Button
	          type="link"
	          onClick={() => {
	            setFieldValue('cardTypeList', void 0);
	          }}
	        >
	          全不选
	        </Button>
	      </div>
        </>
      )}
    >
      {items.map(item => (
        <Option key={item}>{item}</Option>
      ))}
    </Select>

补充知识
Select基本用法：

import { Select } from 'antd';
import React from 'react';

const { Option } = Select;
const children: React.ReactNode[] = [];
for (let i = 10; i < 36; i++) {
  children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
}

const handleChange = (value: string[]) => {
  console.log(`selected ${value}`);
};

const App: React.FC = () => (
  <>
    <Select
      mode="multiple"
      allowClear
      style={{ width: '100%' }}
      placeholder="Please select"
      defaultValue={['a10', 'c12']}
      onChange={handleChange}
    >
      {children}
    </Select>
    <br />
    <Select
      mode="multiple"
      disabled
      style={{ width: '100%' }}
      placeholder="Please select"
      defaultValue={['a10', 'c12']}
      onChange={handleChange}
    >
      {children}
    </Select>
  </>
);

1. 这里涉及到的Select的属性（全部属性，请到antd官网查看）：

属性名	说明
mode	多选或单选，默认单选，设置为 multiple 时是多选
–	–
dropdownRender	自定义下拉框内容，返回 reactNode 节点元素

2. Select的常用事件及用法请看这篇：http://t.csdn.cn/e8EVR