Как переопределить функцию обработчика событий дочернего компонента из родительского компонента в файле response.js

/** @jsx React.DOM */

var Button = React.createClass({
  handleClick: function(){
    console.log(' FROM BUTTON')
  },
  render: function() {
    return <input type='button' onClick={this.handleClick} value={this.props.dname}/>;
  } 
});

var Text = React.createClass({
  render: function() {
    return <input type='text' onClick={this.handleClick} value={this.props.ival}/>;
  } 
});


var search = React.createClass({
  handleClick: function() {
    console.log('searching')
  },
  render: function(){
    return (
      <div>
        <Text/>
        <Button dname={this.props.dname} onClick={this.handleClick} />
      </div>
    );
  }
});

React.renderComponent(<search dname='Look up' fname='Search'/> , document.body);

Я создал кнопку и текстовый компонент и включил их в компонент поиска, теперь я хочу переопределить событие handleClick по умолчанию с обработчиком компонента поиска. Но this.handleClick указывает на обработчик события компонента кнопки.. пожалуйста, помогите.. Мне нужно ОТ ПОИСКА по клику, а я получил ОТ КНОПКИ..

Ответы

Ответ 1

Вы на 99% процентов.

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

Вы должны распространять события вручную

Измените функцию <Button> handleClick для вызова функции this.props.handleClick, переданной из нее <Search> parent:

var Button = React.createClass({
  handleClick: function () {
    this.props.onClick();
  },

  ...

});

Прикрепленный является скрипкой вашего оригинального сообщения с требуемым изменением. Вместо регистрации FROM BUTTON он будет предупреждать searching.

http://jsfiddle.net/chantastic/VwfTc/1/

Ответ 2

Вам нужно изменить свой компонент Button, чтобы разрешить такое поведение:

var Button = React.createClass({
  handleClick: function(){
    console.log(' FROM BUTTON')
  },
  render: function() {
    return (
      <input type='button'
        onClick={this.props.onClick || this.handleClick}
        value={this.props.dname} />
    );
  }   
});

обратите внимание на onClick={this.props.onClick || this.handleClick}.

Таким образом, если вы передаете onClick prop при создании экземпляра Button, он будет иметь предпочтение по методу Button handleClick.