我在多选模式下使用ANT Design's Select component。选择两个选项后(请参见屏幕截图),我想防止再选择任何其他选项。该字段不应被禁用,以便您可以取消选择一个选项并选择另一个。
我已经尝试过onFocus
事件,但是它没有提供我可以用来preventDefault
的事件,否则就无法打开下拉菜单。我还尝试添加引用并在每次blur()
事件被调用时调用onFocus
。这将关闭下拉菜单,但是仍然可以看到一秒钟。
有人知道实现此目标的方法吗?
答案 0 :(得分:4)
在一个简单的条件下,如果选择了3个或更多选项,则可以禁用其他选项。 使用onChange使用选定的选项设置状态,并在显示选项时根据条件禁用它们。
https://codesandbox.io/s/happy-leftpad-lu84g
示例代码
import React, { useState } from "react";
import { Select } from "antd";
const { Option } = Select;
const opts = ["a11", "b12", "c13", "d14", "e15"];
const Selectmultiple = () => {
const [optionsSelected, setOptionsSelected] = useState([]);
const handleChange = value => {
console.log(`selected ${value}`);
setOptionsSelected(value);
};
return (
<div>
<Select
mode="multiple"
style={{ width: "100%" }}
placeholder="Please select"
onChange={handleChange}
>
{opts.map(item => (
<Option
disabled={
optionsSelected.length > 1
? optionsSelected.includes(item)
? false
: true
: false
}
key={item}
>
{item}
</Option>
))}
</Select>
</div>
);
};
答案 1 :(得分:0)
我使用“open”道具解决了这个问题:
const isMaxValues = value.length === limit;
<Select
mode="multiple"
disabled={false}
{...(isMaxValues && { open: false, onDropdownVisibleChange: handleShowError })}
>
{renderOptions()}
</Select>
所以你仍然可以删除/取消选择一些选项
您也可以为 renderOptions 方法提供 isMaxValues 选项并禁用要选择的选项(如果您需要下拉菜单可见)