Question

我在多选模式下使用ANT Design's Select component。选择两个选项后（请参见屏幕截图），我想防止再选择任何其他选项。该字段不应被禁用，以便您可以取消选择一个选项并选择另一个。

我已经尝试过onFocus事件，但是它没有提供我可以用来preventDefault的事件，否则就无法打开下拉菜单。我还尝试添加引用并在每次blur()事件被调用时调用onFocus。这将关闭下拉菜单，但是仍然可以看到一秒钟。

有人知道实现此目标的方法吗？

Answer 1

在一个简单的条件下，如果选择了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>
  );
};

Answer 2

我使用“open”道具解决了这个问题：

const isMaxValues = value.length === limit;

<Select
   mode="multiple"
   disabled={false}
   {...(isMaxValues && { open: false, onDropdownVisibleChange: handleShowError })}
>
   {renderOptions()}
</Select>

所以你仍然可以删除/取消选择一些选项

您也可以为 renderOptions 方法提供 isMaxValues 选项并禁用要选择的选项（如果您需要下拉菜单可见）

选择：限制所选选项的数量

2 个答案: