React-select-fast-filter-options 不能正常工作

Question

我正在尝试使用 React Virtualized Select combined with react-select-fast-filter-options

react-virtualized-select 对我来说效果很好，但不知何故我无法获得 react-select-fast- filter-options 在遵循 Git 指南中的所有步骤后工作，在向 select 输入一些值后，我根本没有得到任何结果。

我已经在 Code Sandbox 中为这个问题创建了代码片段 https://codesandbox.io/s/v34qnr9w0 如果 labelKey 是 content，它 not 工作，但是当你改变 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'));

这是组件的错误？

Answer 1

问题是您将非默认 labelKey 属性传递给 react-virtualized-select 但没有将其传递给 react-select-fast-filter-options （这实际上是在索引您的数据）。第二个库接受 labelKey 参数；（查看 the params documentation）。

所以解决方法是这样做：

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

顺便说一句，CodeSandbox 目前存在缓存问题，因此 I moved your example to WebpackBin and fixed it there。

React-select-fast-filter-options 不能正常工作

React-select-fast-filter-options does not work properly

reactjs

react-select