ReactJS: обработчик onClick не срабатывает при размещении на дочернем компоненте


Я недавно начал работать с ReactJS. В частности, я использую react-rails рубин камень и react-bootstrap компоненты.

у меня есть вопрос относительно размещения onClick прослушиватели событий в дочерних компонентов.

как вы можете видеть в коде ниже, у меня есть родительский компонент, который вызывает у ребенка компонент в его

2   51   2014-06-08 08:42:42

2 ответа:

таким образом, правильным способом обработки событий в этом случае было бы передать обработчик событий дочернему компоненту. Есть несколько способов выполнить то, что вы хотите, и я мог бы реализовать это поведение по-другому (не уверен, что такое вариант использования), но я подключил пример в JSX для вас, который демонстрирует типичную обработку событий между родительскими и дочерними компонентами. Вы можете найти его здесь...

JS Fiddle

просто подумайте об этом, как это:

var ParentComponent = React.createClass({
    render: function(){
        return (
            <ChildComponent onSomeEvent={this.handleThatEvent} />;
        )
    },
    handleThatEvent: function(e){
         //update state, etc.
    }
});

var ChildComponent = React.createClass({
    render: function(){
        return (
           <input type="button" onClick={this.props.onSomeEvent} value="Click Me!" />
        )
    }
});

вам не нужно создавать дочерний компонент, если перед вызовом узла вы создаете var для ссылки на этот рендер, т. е.

var self = this;

так, например (это надуманно, и в этом случае var self не нужен, Но в случае вложенных операторов возврата это потребуется).

var ParentComponent = React.createClass({
    render: function(){
        var self = this;
        return (
            <input type="button" onClick={self.handleThatEvent} value="Click Me!" />;
        )
    },
    handleThatEvent: function(e){
         //update state, etc.
    }
});

еще лучше, вы можете привязать это к функции.

var ParentComponent = React.createClass({
    render: function(){
        return (
            this.state.array.map(function(){
              return (<input type="button" onClick={this.handleThatEvent} value="Click Me!" />);
            }.bind(this));
        )
    },
    handleThatEvent: function(e){
         //update state, etc.
    }
});

или следовать предложению captray в комментариях

var ParentComponent = React.createClass({
    render: function(){
        return (
            this.state.array.map(function(){
              return (<input type="button" onClick={this.handleThatEvent} value="Click Me!" />);
            }, this);
        )
    },
    handleThatEvent: function(e){
         //update state, etc.
    }
});