react-select ：在选择输入上键入时仅显示匹配的选项答案

【问题标题】：react-select : show only the matched options on typing on the select inputreact-select ：在选择输入上键入时仅显示匹配的选项
【发布时间】：2019-07-19 18:47:55
【问题描述】：

我最近开始使用 react-select。 (https://github.com/JedWatson/react-select)

如果选择输入为空白并且 1.我专注于选择输入或， 2. 我点击位于右侧的反向箭头选择输入，我可以看到结果列表中的所有选项默认情况下已提供给 Select 组件。

除了上面提到的行为之外，当我在输入中键入内容时，我应该只能看到匹配的文本结果。我怎样才能做到这一点？

【问题讨论】：

标签： javascript reactjs react-select

【解决方案1】：

使用 menuIsOpen 属性控制菜单的呈现，并为 onInputChange、onChange 和 onBlur 添加自定义事件处理程序：onInputChange 您只需检查执行的操作是否为输入更改，然后设置openMenu（在组件状态下）为真； onChange 和 onBlur 事件你只是隐藏菜单。

<Select
    inputValue={value}
    onInputChange={this.handleInputChange}
    onChange={this.hideMenu}
    onBlur={this.hideMenu}
    options={dataSource}
    menuIsOpen={openMenu}
/>


    handleInputChange = (query, { action }) => {
        if (action === "input-change") {
            this.setState({ openMenu: true });
        }
    };

hideMenu = () => {
    this.setState({ openMenu: false });
};

来源：https://github.com/JedWatson/react-select/issues/2014#issuecomment-448549849

【讨论】：

【解决方案2】：

您可以通过提供值为null 的arrowRenderer 来移除箭头，并且仅通过禁用打开焦点并单击来使其在键入时显示选项：

示例

function App() {
  return (
    <Select
      arrowRenderer={null}
      options={[{ value: 1, label: "foo" }, { value: 2, label: "bar" }]}
      openOnFocus={false}
      openOnClick={false}
    />
  );
}

【讨论】：

感谢您的回复。当我第一次专注于输入时，这些选项效果很好，但是当我再次单击输入时.. 选项立即出现，尽管输入仍然是空白的。有没有办法确保当输入为空白时选项永远不会显示？
@Wenger 这令人沮丧。那个seems to be an open issue 在react-select 中还没有真正的修复。