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

Question

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

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

您将需要应用一些样式，以使按钮不会与选择菜单重叠。