以编程方式关闭反应选择菜单

Question

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

我找不到任何支持这种行为的道具，所以我想通过调用一些关闭onInputChange. 就像是：

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

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

是否有暴露的道具或功能可以满足我的需求？

Answer 1

您可以像这样设置menuIsOpen道具onInputChange：

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

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

Answer 2

我open单独保存状态

const [open, setOpen] = useState(false);

<Select
  menuIsOpen={open}
  onMenuOpen={() => setOpen(true)}
  onMenuClose={() => setOpen(false)}
/>

当我想关闭它时设置 false 。在这种情况下，像这样

onInputChange={(text) => {
  if (text === '') {
    setOpen(false);
  }
}}