React-select-fast-filter-options 无法正常工作

IT技术 reactjs react-select
2021-05-23 22:47:17

我正在尝试将React Virtualized Selectreact-select-fast-filter-options结合使用

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

我已经创建了codesnippet在代码中沙盒此问题https://codesandbox.io/s/v34qnr9w0 它确实没有工作,如果labelKey内容,但是当你改变labelKey标签(默认值),它再次工作。

以下是完整代码:

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'));

这是一个组件的错误?

1个回答

问题是,你通过你的非默认的labelKey属性react-virtualized-select,但不能把它传递给react-select-fast-filter-options(这是什么实际索引数据)。第二个库接受一个labelKey参数;(查看params 文档)。

所以解决方法是这样做:

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

顺便说一句,CodeSandbox 目前存在缓存问题,所以我将您的示例移至 WebpackBin 并在那里修复