React NavDropdown 在点击任何 MenuItem 时隐藏

Question

您好，我正在使用 React bootstrap，NavDropdown。我的应用程序中有一个 Navbar，我想将 NavDropdown 放在 Navbar 中，但 NavDropdown 的默认行为会在任何地方单击时隐藏下拉菜单。

我用过的解决方案：

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

None 以上对我有用。

我的代码：

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> 标签或申请。

Answer 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 中处理该事件，并在 toggle 为布尔值的情况下对其进行任何操作。

Answer 2

React Bootstrap 下拉菜单可以 closed/opened 通过其属性 "Open" 将其设置为 true 或 false。所以基本上，当您单击下拉菜单时，将状态设置为 true，当您单击 menuItem 时，将其设置为 false，然后就可以了！

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

下拉菜单如下：

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

菜单项代码如下：

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

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

React NavDropdown 在点击任何 MenuItem 时隐藏

React NavDropdown hides on click of any MenuItem

reactjs

react-bootstrap