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

Posted 2022-08-26 清颖~

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>