Блог

Есть ли способ отключить выпадающий список? Я не нашел никаких реквизитов, которые могли бы мне помочь.

В частности, я хотел бы отключить выпадающий список, когда пользователь выбрал более 5 элементов.

Я создал этот codesandbox. На самом деле это не работает, потому что оно не связано с состоянием:

 const limit = 3;
const defaults = [colourOptions[2], colourOptions[3]];

export default () => (
  <Select
    defaultValue={defaults}
    isMulti
    name="colors"
    options={colourOptions}
    className="basic-multi-select"
    classNamePrefix="select"
    isSearchable={defaults.length < limit}
    // disableDropdown={defaults.length > limit} // <-- something like this
  />
)
  

Вы можете «отключить / удалить» выпадающий список, удалив компоненты;

 components={{
    Menu: () => null,               // Remove menu
    MenuList: () => null,           // Remove menu list
    DropdownIndicator: () => null,  // Remove dropdown icon
    IndicatorSeparator: () => null  // Remove separator
}}
  

 <Select
    defaultValue={defaults}
    isMulti
    name="colors"
    options={colourOptions}
    className="basic-multi-select"
    classNamePrefix="select"
    isSearchable={defaults.length < limit}
    components={{
        Menu: () => null,
        MenuList: () => null,
        DropdownIndicator: () => null,
        IndicatorSeparator: () => null
    }}
/>
  

Обновленный код-изолированная среда

Документация

Вы можете просто сделать это. В основном отслеживать, сколько элементов уже установлено. Затем isOptionDisabled из повторно выберите опцию отключить, если длина опции превышает ограничение:

 import React, { useState } from "react";
import Select from "react-select";
import { colourOptions } from "./docs/data";

const limit = 3;
const defaults = [colourOptions[2], colourOptions[3]];
// console.log(defaults);
export default () => {
  const [options, setOptions] = useState(defaults);
  return (
    <Select
      defaultValue={defaults}
      isMulti
      name="colors"
      options={colourOptions}
      onChange={(val) => setOptions(val)}
      className="basic-multi-select"
      classNamePrefix="select"
      isSearchable={defaults.length < limit}
      isOptionDisabled={(option, test) => options.length > limit} // <-- something like this
    />
  );
};


  

Вот демонстрация:https://codesandbox.io/s/relaxed-feistel-w44ns?file=/example.js:0-675