在 Ant Design 中,可以使用 Select
组件来实现选择器,然后通过设置 mode
属性为 "multiple"
来实现多选功能。下面是一个示例代码:
import React from 'react';
import { Select } from 'antd';
const { Option } = Select;
const options = [
{ label: 'Apple', value: 'apple' },
{ label: 'Banana', value: 'banana' },
{ label: 'Orange', value: 'orange' },
{ label: 'Mango', value: 'mango' },
];
class MySelect extends React.Component {
handleChange = (selectedValues) => {
console.log('Selected Values:', selectedValues);
}
render() {
return (
);
}
}
export default MySelect;
在上述示例中,我们创建了一个 MySelect
组件,使用 Select
组件实现了一个多选的选择器。通过设置 mode
为 "multiple"
,可以实现多选功能。options
数组用来存储可选项,然后通过 map
方法将每个选项渲染为 Option
组件。当选择器的值发生变化时,会触发 handleChange
方法,我们可以在该方法中获取到选择的值。