react 中绑定事件和阻止事件冒泡

Question

直接上代码吧，我是想了半天不知道哪里出问题了。

    state = {

        spread: false

    }

    componentDidMount() {

        console.log('document clicked')

        document.onclick = () => {

            if(this.state.spread) {

                this.setState({

                    spread: false

                })

            }

        }

    }

    spreadHandler (e) {

        console.log('target clicked')

        // 这个事件绑定在一个 a 标签上

        e.stopPropagation()

        this.setState({

            spread: !this.state.spread

        })

    }

这个功能就是一个类似淘宝顶部导航条的功能，只不过我这里用的是点击事件。现在我触发spreadHandler的时候取消了冒泡，但是document的click事件还是会触发。不知道是因为事件绑定在 a 标签上，还是别的什么原因造成的，有人知道这是怎么回事吗？

Answer 1

react 的合成事件中的阻止冒泡, 是无法取消原生事件冒泡的.原生事件中阻止冒泡行为, 反而可以阻止 react 合成事件中的冒泡.所以应该尽量避免混用, 非用不可的话, 可以在 document 的事件处理程序中加一层判断.document.addEventListener('click', function(e){    // 类似事件委托, 判断一下发生事件的元素.    if( e.target.nodeName.toLowerCase() === 'a' ) {        return;    }}, false);