以编程方式关闭反应选择菜单 [英] Programmatically close react-select menu

问题描述

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

React-select default behavior is to have the menu pop open when the input value is empty. I want to modify this behavior so that when the input is empty, whether before a user has typed anything or the user has backspaced to get to the empty state, the menu will be closed.

我找不到任何支持这种行为的道具，所以我想通过调用一些关闭onInputChange中的菜单的函数以编程方式来实现.类似的东西:

I could not find any prop that enables this behavior, so I thought to do it programmatically, by calling some function that closes the menu in onInputChange. Something like:

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

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

I tried using blur() on the Select ref but it just blurred the input without closing the menu, definitely not the behavior I'm looking for.

是否有公开的道具或功能可以满足我的需求?

Is there a prop or function that's exposed that can fulfill my needs?

推荐答案

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

You can set the menuIsOpen prop onInputChange like this:

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

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

这篇关于以编程方式关闭反应选择菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！