Question

当我点击嵌套的body元素时，我试图弄清楚如何使用停止传播方法。首先，我将click事件添加到正文和元素＆＃39; user-profile＆＃39;。然后，当我单击此元素时，它会触发两个单击事件，与元素和主体相关联。而且我只想在用户点击它时触发元素点击事件。那么，我做错了什么？

module.exports = React.createClass({
            stopPropagation: function(e) {
            e.stopPropagation();
        },
        componentDidMount: function() {
            var self = this;
            document.body.addEventListener("click", function(e) {
                e.preventDefault();
                self.setState({
                    isDropDown: false
                });
            });
        },
        render: function() {
            var className = cs('header-fixed', {'header-visible': this.props.visible});
            var userProfile = cs('user-profile', {'hide': !this.state.isDropDown });
            var userBox = cs('user-box', {'hide' : !this.state.isLogged});
            return (
                <header className={className}>
                    <div className="container">
                        <div className={userBox}>
                        </div>
                        <div className={userProfile} onClick={this.stopPropagation}>
                        </div>
                    </div>
            );
        }
    });

Answer 1

你无法在React中控制Vanila事件监听器。

onClick={this.stopPropagation}将在正文DOM获得click事件后生效。

这是因为......

点击发生。
body元素收到click事件。
React重新计算事件并在React组件中再次发出。

所以，这是我的解决方案。

    module.exports = React.createClass({
                stopPropagation: function(e) {
                e.stopPropagation();
            },
            componentDidMount: function() {
                var self = this;
                document.body.addEventListener("click", function(e) {
                    e.preventDefault();
                    self.setState({
                        isDropDown: false
                    });
                });
                React.findDOMNode(this.refs.userProfile).addEventListener("click", function (e) {
                  e.stopPropagation()
                })
            },
            render: function() {
                var className = cs('header-fixed', {'header-visible': this.props.visible});
                var userProfile = cs('user-profile', {'hide': !this.state.isDropDown });
                var userBox = cs('user-box', {'hide' : !this.state.isLogged});
                return (
                    <header className={className}>
                        <div className="container">
                            <div className={userBox}>
                            </div>
                            <div ref='userProfile' className={userProfile}>
                            </div>
                        </div>
                );
            }
        });

祝你有个愉快的一天。：d

停止传播在React组件

1 个答案: