以编程方式关闭 react-select 菜单

Question

React-select 默认行为是在输入值为空时弹出菜单。我想修改此行为，以便当输入为空时，无论是在用户键入任何内容之前还是用户退格进入空状态时，菜单都会关闭。

我找不到任何启用此行为的道具，所以我想以编程方式执行此操作，方法是调用一些关闭 onInputChange 中的菜单的函数。类似于：

onInputChange={(inputValue) => {
      this.setState({
        inputValue,
      });
      this.selectRef.closeMenu();
    }}

我尝试在 Select ref 上使用 blur()，但它只是在不关闭菜单的情况下模糊了输入，绝对不是我正在寻找的行为。

有没有暴露出来的prop或者function可以满足我的需求？

Answer 1

您可以像这样设置 menuIsOpen 属性 onInputChange：

handleInputChange = input => {
    this.setState({ open: !!input });
}

<Select
    onInputChange={this.handleInputChange}
    menuIsOpen={this.state.open}
/>

以编程方式关闭 react-select 菜单

Programmatically close react-select menu

reactjs

react-select