The property of the Select component dropdownRender, which can expand the drop-down menu.
We only need to edit the code in this attribute to separate the operation area from the options with the Divider component.
Here I use formik.js to manage the state of the form, which is not the focus of this article.
Logic code:
import {
useFormikContext } from 'formik';
const {
setFieldValue } = useFormikContext();
UI part:
<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>
Supplementary knowledge
Select basic usage:
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>
</>
);
- The properties of Select involved here (for all properties, please go to antd official website to view):
| attribute name | illustrate |
|---|---|
| mode | Multiple selection or single selection, single selection by default, multiple selection multiplewhen |
| – | – |
| dropdown render | Customize the content of the drop-down box and return the reactNode node element |
- Please see this article for the common events and usage of Select: http://t.csdn.cn/e8EVR