// import at the top of your component
import Select, {
createFilter
} from 'react-select';
// specify what you'd like to use from the filter options
const filterConfig = {
ignoreCase,
ignoreAccents,
trim,
matchFrom: this.state.matchFromStart ? 'start' : 'any',
};
// render the component
<Select
defaultValue = { colourOptions[0] }
isClearable
isSearchable
name = "color"
options = {
colourOptions
}
filterOption = {
createFilter(filterConfig)
}
/>
2条答案
按热度按时间vngu2lb81#
在react中,选择V1.3。我的印象是,你试图做的事情是不支持的。组件上没有允许您控制此操作的 prop 。以下是react-select V1.3的可用 prop 。
注意:以下内容仅适用于react-select V2,我刚刚阅读了您的评论。
如果您对react-select提供的默认过滤不满意,可以添加自定义过滤。医生是这么说的。
React-Select导出了一个返回filterOptions方法的NodeFilter函数。通过使用这种方法,用户可以挑选过滤逻辑的一些部分进行自定义,而不必大量重写逻辑。
这里是你如何使用它。
如果没有给予足够的控制权,可以编写一个自定义过滤器选项,并将其作为组件属性传递。
如果你真的想从头开始重写过滤逻辑,只需声明一个新的filterOptions函数作为react-select的 prop 传入即可。有关filterOptions属性形状的详细信息,请参阅API文档中的属性类型
我可以复制代码,但它是相当多的。在他们的文档中看到他们的advanced section。
希望能帮上忙。
ppcbkaq52#
我已经使用3.0.8版中的参考文件更新了焦点。我使用的是功能组件。我使用onKeyDown来监听a - z(keyCode 64-91)。然后,我创建一个选项的Map,这些选项以与按下的字母相同的字母开头,并使用以下方法循环聚焦它们。
foundOptions是我的Map,searchNumber是字母被按的次数。有点怪怪的,但很管用。
我也在1.0.0-rc.4版本中使用了ref this.selectRef.focusOption(this.foundOptions.get(this.searchNumber))。相同的概念,但在该版本中有一个专门用于此的函数。