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

Question

我需要在 react-select 的菜单组件中实现一个 'Close' 按钮。单击此按钮后如何关闭菜单？有我可以使用的道具或功能吗？

Answer 1

您可以使用 menuIsOpen 道具并通过类似这样的按钮控制该道具的值：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false
    };
  }

  closeMenu = () => {
    this.setState({ open: false });
  };

  render() {
    return (
      <div className="App">
        <Select
          menuIsOpen={this.state.open}
          onMenuOpen={() => this.setState({ open: true })}
          onMenuClose={this.closeMenu}
        />
        <button onClick={this.closeMenu}>close menu</button>
      </div>
    );
  }
}

您需要应用一些样式，这样按钮才不会被 select 菜单重叠。

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

Close react-select menu programmatically

react-select