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

我在多选模式下使用。在选择了两个选项后（参见屏幕截图），我想阻止选择更多选项。不应禁用该字段，以便您可以取消选择一个选项并选择另一个选项

我尝试了

onFocus

事件，但它没有提供一个可以用来

preventDefault

或阻止打开下拉列表的事件。我还尝试添加ref并在调用

onFocus

事件时调用

blur（）

。这将关闭下拉列表，但它仍会显示一秒钟

有人知道实现这一目标的方法吗

---

如果选择了3个或更多选项，您可以通过一个简单的条件禁用其他选项

将选定选项存储在状态中，并在显示选项时根据条件禁用它们

示例代码

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>
  );
};

import React，{useState}来自“React”；
从“antd”导入{Select}；
const{Option}=Select；
常量选项=[“a11”、“b12”、“c13”、“d14”、“e15”]；
const Selectmultiple=（）=>{
const[optionselected，setoptionselected]=useState（[]）；
常量handleChange=值=>{
log（`selected${value}`）；
设置选项已选择（值）；
};
返回(
{opts.map（项=>(
1.
？选择选项。包括（项目）
？错误
：对
：错
}
键={item}
>
{item}
))}
);
};

如果选择了3个或更多选项，您可以通过一个简单的条件禁用其他选项

将选定选项存储在状态中，并在显示选项时根据条件禁用它们

示例代码

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>
  );
};

import React，{useState}来自“React”；
从“antd”导入{Select}；
const{Option}=Select；
常量选项=[“a11”、“b12”、“c13”、“d14”、“e15”]；
const Selectmultiple=（）=>{
const[optionselected，setoptionselected]=useState（[]）；
常量handleChange=值=>{
log（`selected${value}`）；
设置选项已选择（值）；
};
返回(
{opts.map（项=>(
1.
？选择选项。包括（项目）
？错误
：对
：错
}
键={item}
>
{item}
))}
);
};

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

const isMaxValues=value.length==limit；
{renderOptions（）}

因此，您仍然可以删除/取消选择某些选项

---

此外，您还可以为renderOptions方法提供isMaxValues选项，并禁用要选择的选项（如果您需要显示下拉列表）

我使用“打开”道具解决了此问题：

const isMaxValues=value.length==limit；
{renderOptions（）}

因此，您仍然可以删除/取消选择某些选项

此外，您还可以为RenderProptions方法提供isMaxValues选项，并禁用要选择的选项（如果您需要显示下拉列表）