Обработчик событий React и jQuery запущен в неправильном порядке

Ответ 1

Поэтому я решил это. Когда вы добавляете обработчик событий в документ с помощью jQuery, этот обработчик событий запускается первым. Таким образом, вы не можете поймать событие и прекратить его распространение. Но когда вы прикрепляете обработчик с document.addEventlistener, этот обработчик вызывается последним, и у вас есть возможность реагировать:), чтобы щелкнуть мышью по компонентам React.

Я изменил код Майка, чтобы он работал (http://jsfiddle.net/s8hmstzz/):

/** @jsx React.DOM */
var Menu = React.createClass({
    getInitialState: function() {
        return {
            show: true
        }
    },
    componentDidMount: function() {
        // when attaching with jquery this event handler is run before other handlers
        //$('body').bind('click', this.bodyClickHandler);
        document.addEventListener('click', this.bodyClickHandler);
    },
    componentWillUnmount: function() {
        //$('body').unbind('click', this.bodyClickHandler);
        document.removeEventListener('click', this.bodyClickHandler);
    },
    anchorClickHandler: function(e) {
        console.log('click on anchor - doing some stuff and then stopping propation');
        e.stopPropagation();
        e.nativeEvent.stopImmediatePropagation();
    },
    bodyClickHandler: function(e) {
        console.log('bodyclickhandler');
        this.setState({show: false})
    },
    clickHandler: function(e) {
        // react to click on menu item
    },
    preventEventBubbling: function(e) {
        console.log('click on div - stopping propagation');
        e.stopPropagation();
        e.nativeEvent.stopImmediatePropagation();
    },
    render: function() {
        return (
            <div>
                <a href="#" onClick={this.anchorClickHandler}>Link - will stop propagation</a>
                <div id="menudrop" onClick={this.preventEventBubbling} style={{display: this.state.show ? 'block' : 'none'}}>
                    <ul>
                        <li onClick={this.clickHandler}>Menu Item</li>
                    </ul>
                </div>
            </div>
        )
    }
});

React.renderComponent(<Menu />, document.getElementById('menu'));

Запустите консоль, а затем нажмите div, anchor и body, чтобы увидеть, как она работает. Я не знаю, почему использование addEventListener вместо jQuery меняет порядок обработчиков событий.

Ответ 2

Смотрите мой комментарий выше.

В основном вы не можете полагаться на возможность прекратить распространение события типа onClick в React при использовании jquery (или обычных событий JS) в сочетании.

Что вы можете сделать, это проверить свою функцию $('body').click(), которую вы не нажимаете на меню (поэтому она не закрывает ваше меню после нажатия на элемент). Также стоит отметить, что вы должны привязать это событие тела INSIDE к компоненту реакции, чтобы вы могли его легко добавлять/удалять только путем установки компонента и не изменять функциональные возможности компонента тем, что сам компонент ничего не знает о.

Итак, что вы делаете, это что-то вроде этого (nb: непроверенный код, но на основе компонента, который у меня есть с этой же проблемой)

var Menu = React.createClass({
    getInitialState: function() {
        return {
            show: true
        }
    },
    componentDidMount: function() {
        $('body').bind('click', this.bodyClickHandler);
    },
    componentWillUnmount: function() {
        $('body').unbind('click', this.bodyClickHandler);
    },
    bodyClickHandler: function(e) {
        if ($(e.target).parents('div').get(0) !== this.getDOMNode()) {
            this.setState({
                show: false
            })
        }
    },
    clickHandler: function(e) {
        // react to click on menu item
    },
    render: function() {
        return (
            <div style={{display: this.state.show ? 'block' : 'none'}}>
                <ul>
                    <li onClick={this.clickHandler}>Menu Item</li>
                </ul>
            </div>
        )
    }
});

Итак, в приведенном выше коде мы предполагаем, что вы хотите отобразить раскрывающееся меню, как только компонент будет установлен в dom. Это может быть не так, поскольку вы, вероятно, захотите смонтировать компонент, а затем показать/скрыть его на основе зависания. В этом случае вам просто нужно переместить привязку события $('body').bind() от componentDidMount к обратному вызову везде, где вы показываете меню. $('body').unbind(), вероятно, следует перемещать в том случае, если компонент скрыт. Затем вы получаете идеальную ситуацию, когда при отображении меню мы привязываем событие тела, ожидая щелчка, и отключаем его всякий раз, когда он скрыт и/или отключен.

Что происходит, когда bodyClickHandler вызывается до clickHandler при нажатии на меню, однако bodyClickHandler скрывает только меню, если вы щелкнули родительское дерево, не содержали корневого div нашего компонента (this.getDOMNode() возвращает элемент html корня node внутри render() return).

В результате щелчок за пределами компонента закроет его, щелчок внутри компонента ничего не сделает, щелчок по <li> будет срабатывать clickHandler. Все работает как ожидалось.

Надеюсь, что это поможет.