如何侦听组件外部的单击事件

我找到了一种更简单的方法。

您只需要添加onHide(this.closeFunction)模态

<Modal onHide={this.closeFunction}>
...
</Modal>

假设您具有关闭模态的功能。

派对晚了，但是我成功地在下拉菜单的父元素上设置了一个模糊事件，并使用关联的代码关闭了下拉菜单，并且还将mousedown侦听器附加到检查下拉列表是否打开的父元素上是否打开，如果打开则将停止事件传播，从而不会触发模糊事件。

由于mousedown事件起泡，这将防止子项上的任何mousedown导致父项模糊。

/* Some react component */
...

showFoo = () => this.setState({ showFoo: true });

hideFoo = () => this.setState({ showFoo: false });

clicked = e => {
    if (!this.state.showFoo) {
        this.showFoo();
        return;
    }
    e.preventDefault()
    e.stopPropagation()
}

render() {
    return (
        <div 
            onFocus={this.showFoo}
            onBlur={this.hideFoo}
            onMouseDown={this.clicked}
        >
            {this.state.showFoo ? <FooComponent /> : null}
        </div>
    )
}

...

据我所知，e.preventDefault（）不一定非要调用，但是无论出于何种原因，没有它，Firefox都无法正常播放。适用于Chrome，Firefox和Safari。

1. 创建一个覆盖整个屏幕的固定图层（.backdrop）。
2. 将目标元素（.target）放在.backdrop元素外部并具有更大的堆叠索引（z-index）。

然后，在.backdrop元素上的任何单击都将被视为“ .target元素外部”。

.click-overlay {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
}

.target {
    position: relative;
    z-index: 2;
}

• 这是一个示例：http : //jsfiddle.net/LHmwd/
• 有关讨论的更多信息：https : //github.com/facebook/react/issues/579

对于您的特定用例，当前接受的答案是经过精心设计的。如果您想在用户单击下拉列表时进行监听，只需将<select>组件用作父元素并onBlur为其添加处理程序即可。

这种方法的唯一缺点是，它假定用户已经保持对元素的关注，并且它依赖于表单控件（如果考虑到tab键也可以使元素聚焦和模糊，那么它可能是您想要的，也可能不是您想要的。）-但是这些缺点实际上仅是更复杂用例的限制，在这种情况下，可能需要更复杂的解决方案。

 var Dropdown = React.createClass({

   handleBlur: function(e) {
     // do something when user clicks outside of this element
   },

   render: function() {
     return (
       <select onBlur={this.handleBlur}>
         ...
       </select>
     );
   }
 });