React-select-fast-filter-options 无法正常工作 [英] React-select-fast-filter-options does not work properly

问题描述

我正在尝试将 React Virtualized Select 与 react-select-fast-filter-options

react-virtualized-select 对我来说效果很好，但不知何故，在按照 Git 中的所有步骤操作后，我无法让 react-select-fast-filter-options 工作引导，输入一些值选择输入后，我根本没有结果.

react-virtualized-select works well for me, but somehow I can not get react-select-fast-filter-options to work after following all steps in Git guide, after entering some value to select input, I got no results at all.

我在代码沙盒中为此问题创建了代码片段https://codesandbox.io/s/v34qnr9w0如果 labelKey 是 content，它不起作用，但是当您将 labelKey 更改为 label 时>(默认值)，它再次工作.

I ve created codesnippet in Code Sandbox for this issue https://codesandbox.io/s/v34qnr9w0 It does not work if labelKey is content, but when you change labelKey to label(default value), it works again.

完整代码如下:

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

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

This is a component' bug ?

这是一个组件的错误?

推荐答案

问题是您将非默认的 labelKey 属性传递给 react-virtualized-select 但不是将它传递给 react-select-fast-filter-options (实际上是在索引你的数据).第二个库接受一个 labelKey 参数；(查看参数文档)..>

所以解决方法是这样做:

So the fix is to do this:

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

顺便说一下，CodeSandbox 目前有缓存问题，所以 我移动了你的例子到 WebpackBin 并在那里修复它.

By the way, CodeSandbox is having a caching problem at the moment so I moved your example to WebpackBin and fixed it there.

这篇关于React-select-fast-filter-options 无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！