Question

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

我用过的解决方案：

{
    "model": "app_name.model_name", 
    "pk": 1, 
    "fields": {"field1": 1, "field2": 2, etc..} 
}

以上都不适用于我。

我的代码：

echo "export PATH=\$PATH:/usr/lib/java/jdk1.8.0_121/bin/" >> /home/$USER/Desktop/output.txt

所以基本上我的问题是，如果我点击任何地方，我的NavDropdown会隐藏，我希望它仅在我点击echo "export PATH=\$PATH:$JAVA_HOME/bin/" >> /home/$USER/Desktop/output.txt标记，而不是evt.preventDefault(); evt.stopPropagation();标记或应用程序中的任何其他位置时隐藏。

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下拉菜单可以通过将其设置为true或false，通过其道具“ Open”来关闭/打开。因此，基本上，当您单击下拉列表时，将状态设置为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)}
/>

Answer 3

我可能错了，但似乎 $ awk -f tst.awk file {"user": "abc@xyz.com","contact":[{"name":"Jack O'Malley","number":"+1 23456789"},{"name":"Jack Jill Smith-Jones","number":"+1 232324789"}]} {"user": "abc@xyz.com","contact":[{"name":"X Æ A-12 Musk","number":"+1 23456789"},{"name":"Jack Jill","number":"+1 232324789"}]} 已被 open 取代。实现的逻辑是一样的。

（来自@user1735921 的修改示例）

show

React NavDropdown会在点击任何MenuItem时隐藏

3 个答案: