Programmatically close react-select menu

问题

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.

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();
    }}

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?

回答1:

You can set the menuIsOpen prop onInputChange like this:

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

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

来源：https://stackoverflow.com/questions/53660316/programmatically-close-react-select-menu