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屋!