在我的反应应用程序中，其中一个组件正在创建一个按钮下拉菜单，如下所示。
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a onClick=doSomething href="#">HTML</a></li>
<li><a onClick=doSomething href="#">CSS</a></li>
<li><a onClick=doSomething href="#">JavaScript</a></li>
</ul>
</div>
如果有人单击/悬停在该菜单区域之外的任何位置，我如何关闭该菜单？
不要在 React 中使用 jQuery 事件和 DOM 操作，你没有抓住重点。
你有一个state use it!
在下面的示例中，您可以看到我删除了所有jquery.js and bootstrap.js文件并仅保留bootstrap.css.
我用state为了显示/隐藏<ul>列表（我已将其设置为display: block为了覆盖默认值display: none of bootstrap.css).
我设置了 2 个关于显示和隐藏的主要处理程序<ul>和 1 个处理程序onclick每个项目的：
-
toggleShow()- 切换show财产在state附于onBlur按钮的。
-
hide()- 隐藏<ul>当然是通过状态（它做了一个
更多的事情我会解释）。
-
doSomething()- 单击某个项目时将触发。
不过，当我们隐藏<ul>我们无法处理点击事件。
But why?
因为我们并没有真正隐藏它，所以当state.show是假的。所以基本上存在一种竞争条件setState触发针对处理程序的重新渲染doSomething无法运行的事件处理程序。
所以这里的挑战是确定是否触发了活动元素onBlur按钮的事件是里面的项目<ul>。如果是，那么我们需要让该项目触发它onClick事件，然后才设置状态并“隐藏”.
我们在以下人员的帮助下做到了这一点relatedTarget附加到event。这就是我们正在寻找的活跃元素，如果我们有一个但它不是null然后我们触发它的点击事件（无论它是什么元素，因为我们不关心），然后我们用show: false.
一个工作示例：
class DropDown extends React.Component{
constructor(props){
super(props);
this.state = {
show: false
}
this.doSomething = this.doSomething.bind(this);
this.toggleShow = this.toggleShow.bind(this);
this.hide = this.hide.bind(this);
}
doSomething(e){
e.preventDefault();
console.log(e.target.innerHTML);
}
toggleShow(){
this.setState({show: !this.state.show});
}
hide(e){
if(e && e.relatedTarget){
e.relatedTarget.click();
}
this.setState({show: false});
}
render(){
return(
<div className="dropdown">
<button
className="btn btn-primary dropdown-toggle"
type="button"
onClick={this.toggleShow}
onBlur={this.hide}
>
{"Dropdown Example"}
<span className="caret"></span>
</button>
{
this.state.show &&
(
<ul className="dropdown-menu" style={{display: 'block'}}>
<li><a onClick={this.doSomething} href="#">HTML</a></li>
<li><a onClick={this.doSomething} href="#">CSS</a></li>
<li><a onClick={this.doSomething} href="#">JavaScript</a></li>
</ul>
)
}
</div>
);
}
}
ReactDOM.render(<DropDown />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="root"></div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
