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>
</>
);
- 这里涉及到的Select的属性(全部属性,请到antd官网查看):
属性名 | 说明 |
---|---|
mode | 多选或单选,默认单选,设置为 multiple 时是多选 |
– | – |
dropdownRender | 自定义下拉框内容,返回 reactNode 节点元素 |
- Select的常用事件及用法请看这篇:http://t.csdn.cn/e8EVR