如何从React组件中向BODY添加单击处理程序？-Java 学习之路

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

使用jQuery我通常会在下拉打开时向 body 添加一个事件监听器，并在关闭下拉时再次将其删除 . （事件侦听器本身关闭下拉列表 - 任何单击事件 within 组件都不会传播以防止正文单击处理程序触发 . ）

有没有办法从React组件中将侦听器附加到 body 元素？或者我应该只使用jQuery？（我有点担心混合使用React和jQuery . ）

1 回答

React只是JavaScript，所以通过使用 addEventListener() 正常地将点击处理程序附加到任何元素 . 通过删除添加的事件处理程序，在 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>;
    }
});

回复于 2024-04-28T06:42:50+08:00

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

1 回答

相关问题