Как получить отфильтрованные параметры в MenuList?

Question

Я пытаюсь встроить «Вставить все» в пользовательский компонент MenuList для react-select.

Выглядит так:

const MySelect = (props) => {

  const MenuList = ({ children, ...ownProps }) => {
    return (
      <div>
        <button onClick={() => ownProps.setValue(props.options)}>
          Insert all
        </button>
        <components.MenuList {...ownProps}>{children}</components.MenuList>
      </div>
    );
  };

  return (
    <ReactSelect options={props.options} components={{ MenuList }} ... />
  );
}

Проблема: options просто содержит все параметры, прежде чем пользователь начнет вводить в поисковом списке.

После начала ввода, скажем, осталось 5 из 50 вариантов.

Когда кто-то нажимает Insert all,Я хочу вставить только 5 оставшихся вариантов. Но все 50 вариантов вставляются. Я проверил ownProps что-то вроде filteredOptions, но этого не было. Есть ли способ получить отфильтрованные параметры?

Answer 1

Похоже, react-select не предоставляет такую ​​информацию. Вы должны достичь этого самостоятельно. Попробуйте написать фильтруемое состояние в библиотеке react-select.

Answer 2

Получилось, но это далеко от идеала: - /

...
  onClick={() => {
    const visibleOptions = props.options.filter(
      optionContainsStr(ownProps.selectProps.inputValue)
    );

    ownProps.setValue(visibleOptions);
  }}
...

const optionContainsStr = str => option => {
  return (
    option.value
      .toString()
      .toLowerCase()
      .includes(str) || 
    option.label
      .toLowerCase()
      .includes(str)
  );
};