React NavDropdown 在单击任何 MenuItem 时隐藏答案

【问题标题】：React NavDropdown hides on click of any MenuItemReact NavDropdown 在单击任何 MenuItem 时隐藏
【发布时间】：2017-09-01 22:25:03
【问题描述】：

您好，我正在使用反应引导程序 NavDropdown。我的应用程序中有一个 Navbar，我想将 NavDropdown 放在 Navbar 中，但 NavDropdown 的默认行为隐藏了单击任意位置的下拉菜单。

我使用过的解决方案：

evt.preventDefault();
evt.stopPropagation();

以上都不适合我。

我的代码：

class CustomNavDropdown extends React.Component {

  constructor(props, context) {
    super(props, context);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(evt) {
    evt.preventDefault();
    evt.stopPropagation();
  }
  render() {
    return (
      <NavDropdown title={"Dropdown"}>
        <MenuItem divider />
        <MenuItem onClick={this.handleClick}>an item</MenuItem>
      </NavDropdown>
    );
  }
}

所以基本上我的问题是，如果我点击任何地方，我的 NavDropdown 会隐藏，我希望它仅在我点击 <ul> 标签而不是 <li> 标签或应用程序中的任何其他地方时隐藏。

【问题讨论】：

标签： reactjs react-bootstrap

【解决方案1】：

我解决如下：

class CustomNavDropdown extends React.Component {

  constructor(props, context) {
    super(props, context);
    this.state = {menuIsOpened: false}
    this.handleToggle = this.handleToggle.bind(this);
  }
  handleToggle(toggle) {
    //you code here, change state of menuIsOpened if you want to open or close
  }
  render() {
    return (
      <NavDropdown title={"Dropdown"} open={this.state.menuIsOpened} onToggle={this.handleToggle}>
        <MenuItem divider />
        <MenuItem onClick={this.handleClick}>an item</MenuItem>
      </NavDropdown>
    );
  }
}

我提出了 NavDropdown 支持的 onToggle 事件，然后我们可以在 handleToggle 中处理该事件，并在切换为布尔值的情况下对其进行任何处理。

【讨论】：

【解决方案2】：

React Bootstrap Drop-down 可以通过它的 prop "Open" 设置为 true 或 false 来关闭/打开。所以基本上当你点击下拉菜单时，将状态设置为 true，当你点击 menuItem 时，将其设置为 false，然后就可以了！

const [dropDownOpen, setdropDownOpen] = React.useState(false);

然后下拉会像：

<NavDropdown
  eventKey={index}
  open={dropDownOpen}
  key={`navItem_${index}`}
  onClick={() => {setdropDownOpen(true)}}
/>

menuItem 代码如下：

<MenuItem
  onClick={() => {setdropDownOpen(false)}
/>

【讨论】：

【解决方案3】：

我可能错了，但似乎open 已被show 取代。实现的逻辑是一样的。

（来自@user1735921的修改示例）

 class CustomNavDropdown extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {menuIsOpened: false}
    this.handleToggle = this.handleToggle.bind(this);
  }
  handleToggle(toggle) {
    //you code here, change state of menuIsOpened if you want to open or close
  }
  render() {
    return (
      <NavDropdown title={"Dropdown"} show={this.state.menuIsOpened} onToggle={this.handleToggle}>
        <MenuItem divider />
        <MenuItem onClick={this.handleClick}>an item</MenuItem>
      </NavDropdown>
    );
  }
}

【讨论】：