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

Posted 2022-10-25 清颖~

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