如何在 React-select 中更改focusedOption答案

【问题标题】：How to change focusedOption in React-select如何在 React-select 中更改focusedOption
【发布时间】：2018-08-12 17:46:53
【问题描述】：

目前我正在使用 react-select 1.2.1，但我遇到了一个问题，需要我从我的选择组件中更改焦点选项，但我无法找到解决方法？提前致谢。

例如：

在上图中，如果我按退格键从顶部删除 i，则焦点选项仍然是 florida。相反，当没有基于“i”的过滤时，我想将焦点选项更改为第一个元素。

【问题讨论】：

您可以分享与示例相关的任何代码吗？您能指出哪里出了问题或您无法实现的目标吗？谢谢
codesandbox.io/s/7okkxnl2jx 虽然您可以查看此内容，但此内容使用 v2，但此处的想法与 v1.2.1 中的相同，每当我选择一个选项时，默认情况下焦点会转到下一个选项。我想改变这种行为，以便我可以指定哪个选项是重点。我的意思是我应该有权改变专注的选项
当我单击下拉框时，我将鼠标悬停在一个选项上并单击它以将其添加到选择框中。然后焦点转到列表中鼠标悬停在上方的下一个。这就是我看到的情况。你能再一步一步解释你要做什么吗？
我已经更新了问题。希望对您有所帮助。
这对您尝试做的事情绝对有帮助。我可以在搜索 ida 时重新创建它，因为这将选择佛罗里达，然后当您按两次退格键并且“i”仍然存在时，仍将选择佛罗里达。但相反，您希望选择最顶部的选项。

标签： reactjs forms drop-down-menu redux react-select

【解决方案1】：

在反应选择 V1.3 中。我的印象是不支持您尝试做的事情。组件上没有任何道具可以让您控制它。这是available props for react-select V1.3。

注意：以下仅适用于 react-select V2，我刚刚阅读了您的评论。

如果您对react-select 提供的默认过滤不满意，您可以添加自定义过滤。文档是这样说的。

React-Select 导出一个 createFilter 函数，该函数返回一个过滤选项方法。通过使用它，用户可以选择过滤逻辑自定义，无需重写逻辑批发。

这里是你如何使用它。

// 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 函数作为反应选择的道具。有关形状的详细信息 filterOptions 属性，请查看 api 文档中的属性类型

我可以复制代码，但数量很多。在他们的文档中查看他们的advanced section。

希望对你有帮助。

【讨论】：

【解决方案2】：

我在 3.0.8 版本中使用 ref 更新了焦点。我正在使用功能组件。我使用 onKeyDown 来监听 a - z (keyCode 64-91)。然后，我创建一个以与按下的字母相同的字母开头的选项的地图，并使用以下内容循环关注它们。

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

foundOptions 是我的地图，searchNumber 是字母被按下的次数。这有点 hacky，但它确实有效。

我还使用 ref this.selectRef.focusOption(this.foundOptions.get(this.searchNumber)) 在 1.0.0-rc.4 版本中完成了它。相同的概念，但该版本中专门为此公开了一个功能。

【讨论】：