Остановить react-выбор из расширяющихся по мере добавления опций

#reactjs #drop-down-menu #dropdown #multi-select #react-select

#reactjs #выпадающее меню #выпадающий список #множественный выбор #реагировать-выбрать

Вопрос:

Итак, я рассматриваю возможность использования react-select для проекта, который требует множественного выбора. Однако пример множественного выбора продолжает расширяться по мере выбора большего количества элементов. Это не сработает, если в выпадающем списке есть множество опций на выбор (скажем, 100). Есть ли способ в библиотеке react-select, чтобы значение было «Xyz и еще 5» или что-то подобное?

 import React, { Component } from 'react'
import Select from 'react-select'

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' },
  { value: 'cherry', label: 'Cherry' },
  { value: 'foo', label: 'Foo' },
  { value: 'bar', label: 'Bar' }
]

const MyComponent = () => (
  <Select
    options={options}
    isMulti
    className="basic-multi-select"
    classNamePrefix="select"
  />
)

Ответ №1:

Вы можете использовать components framework, чтобы перезаписать ValueContainer компонент, который содержит выбранные значения в форме значка.

 const ValueContainer = ({ children, getValue, ...props }) => {
  var values = getValue();
  var valueLabel = "";

  if (values.length > 0) valueLabel  = props.selectProps.getOptionLabel(values[0]);
  if (values.length > 1) valueLabel  = ` amp; ${values.length - 1} more`;

  // Keep standard placeholder and input from react-select
  var childsToRender = React.Children.toArray(children).filter((child) => ['Input', 'DummyInput', 'Placeholder'].indexOf(child.type.name) >= 0);

  return (
    <components.ValueContainer {...props}>
      {!props.selectProps.inputValue amp;amp; valueLabel }
      { childsToRender }
    </components.ValueContainer>
  );
};

<Select
  { ... }
  isMulti
  components={{
    ValueContainer
  }}
  hideSelectedOptions={false}
/>

Обратите внимание на фильтрацию и включение Input (или DummyInput ) компонента: без этого базовая функциональность Select компонента (например, фокус и т.д.) Будет потеряна.
Также установите для hideSelectedOptions prop значение false , чтобы вы могли отменить выбор выбранных опций.

Пример функционирования можно посмотреть здесь.