Прекратить расширение response-select при добавлении параметров

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

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"
  />
)

reactjs drop-down-menu dropdown react-select multi-select
person James Robert Singleton    schedule 19.03.2019    source источник
comment
Можете ли вы предоставить код того, как вы его используете? Итак, мы можем вам помочь.   -  person Sathvik Chinnu    schedule 19.03.2019
comment
@SathvikChinnu Я связался с примером, который использую, но нормально.   -  person James Robert Singleton    schedule 20.03.2019

Ответы (1)


arrow_upward
5
arrow_downward

Вы можете использовать структуру компонентов, чтобы перезаписать 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 += ` & ${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 && valueLabel }
      { childsToRender }
    </components.ValueContainer>
  );
};

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

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

Функциональный пример можно просмотреть здесь.

person Rallen    schedule 25.03.2019
comment
Это очень хорошее решение, несмотря на то, что оно не подходит для мобильного просмотра, когда элемент расширяется по вертикали. - person Greg Holst; 28.03.2020