redux 如何在React-select中更改focusedOption

7y4bm7vi  于 2023-10-19  发布在  React
关注(0)|答案(2)|浏览(138)

目前我使用的是react-select 1.2.1,我被一个问题卡住了,这个问题需要我从我的Select Component中更改焦点选项,但我找不到解决方法?先谢了。
例如:

在上图中,如果我按下退格键将i从顶部删除,那么焦点选项仍然是佛罗里达。相反,我想把focused选项改为第一个元素,因为没有基于“i”的过滤。

vngu2lb8

vngu2lb81#

在react中,选择V1.3。我的印象是,你试图做的事情是不支持的。组件上没有允许您控制此操作的 prop 。以下是react-select V1.3的可用 prop 。

注意:以下内容仅适用于react-select V2,我刚刚阅读了您的评论。

如果您对react-select提供的默认过滤不满意,可以添加自定义过滤。医生是这么说的。
React-Select导出了一个返回filterOptions方法的NodeFilter函数。通过使用这种方法,用户可以挑选过滤逻辑的一些部分进行自定义,而不必大量重写逻辑。
这里是你如何使用它。

// 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)
  }
/>

如果没有给予足够的控制权,可以编写一个自定义过滤器选项,并将其作为组件属性传递。
如果你真的想从头开始重写过滤逻辑,只需声明一个新的filterOptions函数作为react-select的 prop 传入即可。有关filterOptions属性形状的详细信息,请参阅API文档中的属性类型
我可以复制代码,但它是相当多的。在他们的文档中看到他们的advanced section
希望能帮上忙。

ppcbkaq5

ppcbkaq52#

我已经使用3.0.8版中的参考文件更新了焦点。我使用的是功能组件。我使用onKeyDown来监听a - z(keyCode 64-91)。然后,我创建一个选项的Map,这些选项以与按下的字母相同的字母开头,并使用以下方法循环聚焦它们。

reactSelect.current.select.setState({
          focusedOption: foundOptions.get(searchNumber),
        });

foundOptions是我的Map,searchNumber是字母被按的次数。有点怪怪的,但很管用。
我也在1.0.0-rc.4版本中使用了ref this.selectRef.focusOption(this.foundOptions.get(this.searchNumber))。相同的概念,但在该版本中有一个专门用于此的函数。

相关问题