React-select-fast-filter-options не работает должным образом

Я пытаюсь использовать React Virtualized Select в сочетании с response-select-fast-filter-options

react-virtualized-select у меня работает хорошо, но почему-то я не могу заставить работать response-select-fast-filter-options после выполнения всех шагов в руководстве Git, после введя какое-то значение для выбора ввода, я вообще не получил результатов.

Я создал код-сниппет в Code Sandbox для этой проблемы https://codesandbox.io/s/v34qnr9w0 It не работает, если labelKey имеет значение content, но если вы измените labelKey на label (значение по умолчанию), он снова работает.

Ниже приведен полный код:

import React from 'react';
import { render } from 'react-dom';

import Select from 'react-virtualized-select';
import createFilterOptions from 'react-select-fast-filter-options';
import 'react-select/dist/react-select.css';
import 'react-virtualized/styles.css'
import 'react-virtualized-select/styles.css'

const styles = {
  fontFamily: 'sans-serif',
  textAlign: 'center',
};

class App extends React.Component {

  render() {
    const options = [
      { id: 'Stanford University', content: 'Stanford' },
      { id: 'Stan University', content: 'Stan' },
      { id: 'Stanford BBB University', content: 'Stanford BBB' },
      { id: 'Stanford CCC University', content: 'Stanford CCC' }
    ];

    const filterOptions = createFilterOptions({ options });

    return (
      <div style={styles}>
        <Select
          name="university"
          labelKey="content"
          valueKey="id"
          options={options}
          filterOptions={filterOptions}
          onChange={val => console.log(val)}
        />
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

Это ошибка компонента?


reactjs react-select
person Zuy.BK    schedule 24.10.2017    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Проблема в том, что вы передаете свойство labelKey не по умолчанию в react-virtualized-select, но не передаете его в react-select-fast-filter-options (что на самом деле индексирует ваши данные). Эта вторая библиотека принимает параметр labelKey; (см. документацию по параметрам).

Итак, исправление заключается в следующем:

const filterOptions = createFilterOptions({
  labelKey: 'content',
  options
});

Кстати, у CodeSandbox сейчас проблема с кешированием, поэтому я переместил ваш пример в WebpackBin и исправил там.

person bvaughn    schedule 24.10.2017
comment
Большое спасибо ! - person Zuy.BK; 25.10.2017
comment
@bvaughn Где я могу увидеть все свойства по умолчанию, которые есть у react-viratualized-select? (Как вы говорите, свойство labelKey не является значением по умолчанию, мне нужен список всех свойств по умолчанию, которые мне не нужно передавать в react-select-fast-filter-options). - person Lavish Kothari; 20.06.2019
comment
@LavishKothari Вы смотрели документацию по параметрам, на которую я конкретно ссылался? Он очень четко показывает, какие ключи имеют значения по умолчанию. - person bvaughn; 20.06.2019
comment
Ах, я это пропустил. Спасибо, что явно указали на это. Это здесь. - person Lavish Kothari; 21.06.2019