Question

我正在使用react-bootstrap中的DropdownButton来创建包含自定义内容的下拉菜单。用户可以在内容中选择各种选项，然后单击下拉菜单中的一个按钮以提交所选的选项。

我面临的问题是，当用户单击“提交”按钮时，我无法关闭下拉菜单。

这是我的代码：

<DropdownButton
  title={ name }
  variant="outline-secondary"
  onToggle={ this.handleDropdownToggle }
>
  <div className="body">
    { this.renderOptions(options) }
  </div>
  <div className="filter-submit">
    <Button variant="primary" onClick={ this.onSubmit }>
      Accept
    </Button>
  </div>
</DropdownButton>

如果我将Dropdown元素与Dropdown.Toggle Dropdown.menu和show属性一起使用，则可以控制可见性，但是单击后将无法关闭下拉菜单在它外面。

Answer 1

您可以通过onClick事件触发的简单状态更改来完成此操作。

在您的react组件内执行以下操作：

state = {
    showDropdown: false
}

toggleDropdown = () => {
    if (this.state.showDropdown) {
        this.setState({ showDropdown: false });
    } else {
        this.setState({ showDropdown: true });
    }
}

在您的下拉组件上添加一个onClick来触发您要打开或关闭下拉菜单的任何项目的状态更改。如果您点击打开的下拉菜单之外的任意位置，则onBlur触发器触发关闭，让生活变得轻松

<DropdownButton
  title={ name }
  variant="outline-secondary"
  onClick={() => this.toggleDropdown()}
  onBlur={() => this.toggleDropdown()}
>
  <Dropdown.Item href="#/action-1" onClick={() => this.toggleDropdown()}>Action</Dropdown.Item>
  <Dropdown.Item href="#/action-2" onClick={() => this.toggleDropdown()}>Another action</Dropdown.Item>
  <Dropdown.Item href="#/action-3" onClick={() => this.toggleDropdown()}>Something else</Dropdown.Item>
</DropdownButton>

React-bootstrap，如何关闭下拉菜单

1 个答案: