如何在 react-select 中定义选项的最大限制？

Question

我为我的应用程序 React 创建了一个 React select 组件，我有 70 多个选项，为此我想定义一个最大选项限制，用户可以选择这些选项来很好地处理它。你能帮帮我吗？

代码：

export default function ReactSelect(props) {
  const animatedComponents = makeAnimated();
  return (
    <Select
      isMulti="true" // allow to select mutli options
      isRtl="true" // right to left
      name="name" // html name
      options={accountsNames} // options
      className="basic-multi-select"
      classNamePrefix="select"
      isSearchable="true" // searchable for the closest one
      placeholder="اختر اسم الحساب..." // if there is no option selected
      components={animatedComponents}
    />
  );
}

Answer 1

这可能有帮助：

const MultiSelect = ({valueList, onChange, options, maxLimit = 5}) => {
  return (
    <Select
      value={valueList}
      isMulti
      onChange={onChange}
      options={options}
      isOptionDisabled={(option) => valueList.length >= maxLimit}
    />
  );
};

Answer 2

您可以根据selectedOptions.length控制所选选项的状态并有条件地禁用选项，如下所示：

const [selectedOptions, setSelectedOptions] = React.useState([]);

return (
  <Select
    isMulti
    value={selectedOptions}
    onChange={(o) => setSelectedOptions(o)}
    options={colourOptions}
    // only allow user to choose up to 3 options
    isOptionDisabled={() => selectedOptions.length >= 3}
    className="basic-multi-select"
    classNamePrefix="select"
  />
);

如何在 react-select 中定义选项的最大限制？

How to define a max limit of options in react-select?

reactjs

react-select

现场演示