antd中select组件如何最多选10个选项,超过10个禁用
时间: 2024-01-28 21:04:17 浏览: 27
在 Ant Design 中,可以使用 `Select` 组件的 `mode` 属性设置选择模式为多选,然后使用 `onChange` 事件监听选择变化,当选择数量超过 10 时,将其余选项设置为禁用状态即可。
以下是一个示例代码:
```jsx
import { useState } from 'react';
import { Select } from 'antd';
const { Option } = Select;
function Demo() {
const [value, setValue] = useState([]);
const handleChange = (value) => {
if (value.length > 10) {
// 只保留前10个选项
value = value.slice(0, 10);
// 设置其余选项为禁用状态
const disabledOptions = [];
for (let i = 10; i < value.length; i++) {
disabledOptions.push(value[i]);
}
setValue(value);
setDisabledOptions(disabledOptions);
} else {
setValue(value);
setDisabledOptions([]);
}
};
const [disabledOptions, setDisabledOptions] = useState([]);
return (
<Select
mode="multiple"
value={value}
onChange={handleChange}
placeholder="请选择"
>
{options.map((option) => (
<Option
key={option.value}
value={option.value}
disabled={disabledOptions.includes(option.value)}
>
{option.label}
</Option>
))}
</Select>
);
}
// 选项数据
const options = [
{ value: '1', label: '选项1' },
{ value: '2', label: '选项2' },
// ...
{ value: '20', label: '选项20' },
];
```
在上面的示例中,使用了 `useState` 钩子来维护选择的值和禁用的选项。当选择的数量超过 10 个时,只保留前 10 个选项,将其余选项设置为禁用状态。在渲染选项时,根据 `disabledOptions` 数组判断是否需要禁用该选项。