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

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 事件触发的简单状态更改来完成此操作。

在你的反应组件中做这样的事情：

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>

Answer 2

这段代码运行良好，

class DropdownFixed extends Component {
  state = { dropdownIsOpen: false }

  toggleDropdown = () => this.setState({ dropdownIsOpen: !this.state.dropdownIsOpen })

  render {
    return (
      <DropdownButton
        onToggle={toggleDropdown}
        open={dropdownIsOpen}
      >
        <MenuItem onClick={toggleDropdown}>Click me!</MenuItem>
      </DropdownButton>
    )
  }
}