react中button上绑定react事件触发原生body上绑定的事件

最新推荐文章于 2025-07-03 18:11:30 发布

愤怒的小青春

最新推荐文章于 2025-07-03 18:11:30 发布

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： react

本文链接：https://blog.youkuaiyun.com/qq_30114149/article/details/80223494

react 专栏收录该内容

0 篇文章

订阅专栏

本文介绍了一种在React应用中实现二维码显示与隐藏功能的方法，解决了点击按钮后二维码无法正常消失的问题。通过调整事件监听器的设置，确保了点击非二维码区域时能够正确隐藏二维码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

情景再现

需求：在Web页面中添加一个使用移动设备扫描二维码的功能，在点击按钮时显示二维码（在点击按钮二维码消失），点击非二维码区域时将其隐藏起来。

出现问题：点击按钮二维码显示之后，在点击按钮，二维码一直显示，不会消失

分析原因：React合成事件系统的委托机制，依赖事件的冒泡机制完成委派，在点击按钮时，同时触发了body上绑定的事件

出错代码：

class QrCode extends Component {
    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
        this.handleClickQr = this.handleClickQr.bind(this);
        this.state = {
            active: false,
        };
    }
    componentDidMount() {
        debugger
        document.body.addEventListener('click', e => {
            this.setState({
                active: false
            });
        });
        //  不要将合成事件与原生事件混用
        document.querySelector('.code').addEventListener('click', e => {
            e.stopPropagation();
        })
    }
    componentWillUnmount() {
        document.body.removeEventListener('click');
        document.querySelector('.code').removeEventListener('click');
    }
    handleClick() {
        this.setState({
            active: !this.state.active,
        });
    }
    render() {
        return (
            <div className="qr-wrapper">
                <button className="qr" >二维码</button>
                <div
                    className="code"
                    style={{display:this.state.active ? 'block' : 'none'}}
                    {onClick={this.handleClickQr}
                >
                    <img src={require('./a.jpg')} />
                </div>
            </div>
        );
    }
}

修改：不要将合成事件与原生事件混用，都改为原生事件

class QrCode extends Component {
    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
        this.state = {
            active: false,
        };
    }
    componentDidMount() {
        document.body.addEventListener('click', e => {
            this.setState({
                active: false
            });
        });
        document.querySelector('.qr').addEventListener('click', e => {
            this.setState({
                active: !this.state.active,
            });
            //  必须加上阻止事件冒泡
            e.stopPropagation();
        })
        //  不要将合成事件与原生事件混用
        document.querySelector('.code').addEventListener('click', e => {
            e.stopPropagation();
        })
    }
    componentWillUnmount() {
        document.body.removeEventListener('click');
        document.querySelector('.code').removeEventListener('click');
        document.querySelector('.qr').removeEventListener('click');
    }
    render() {
        return (
            <div className="qr-wrapper">
                <button className="qr" >二维码</button>
                <div
                    className="code"
                    style={{display:this.state.active ? 'block' : 'none'}}
                >
                    <img src={require('./a.jpg')} />
                </div>
            </div>
        );
    }
}