javascript - 如何从 React 组件中向 BODY 添加点击处理程序？

Question

我正在构建一个下拉菜单 React 组件，当用户单击该组件 外部 中的 DOM 中的任意位置时，该组件应该关闭。

使用 jQuery，我通常会在打开下拉菜单时向 body 添加一个事件监听器，并在关闭下拉菜单时再次将其删除。 (事件监听器本身会关闭下拉列表——组件内的任何点击事件都不会传播，以防止主体点击处理程序触发。)

有什么方法可以在 React 组件中将监听器附加到 body 元素？或者我应该只使用 jQuery 吗？ (我对混合使用 React 和 jQuery 有点谨慎。)

Answer 1

React 只是 JavaScript，因此可以使用 addEventListener() 正常将点击处理程序附加到任何元素。在 componentDidMount 中执行此操作通常非常整洁，并且在 componentWillUnmount 中通过删除添加的事件处理程序进行清理。

var Component = React.createClass({
    componentDidMount: function () {
        document.body.addEventListener('click', this.myHandler);
    },
    componentWillUnmount: function () {
        document.body.removeEventListener('click', this.myHandler);
    },
    myHandler: function () {
        alert('click');
    },
    render: function() {
        return <div>Hello {this.props.name}</div>;
    }
});