event-handling - 如何在react.js中从父组件重写子组件的事件处理函数

Question

/** @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 指向按钮组件的事件处理程序..请帮忙..我需要点击“FROM SEARCH”，而不是“FROM BUTTON”..

Answer 1

你已经完成了 99% 的任务。

React 使用 one-way data-flow 。因此，嵌套组件上的事件不会传播到其父级。

您必须手动传播事件

更改您的 <Button> handleClick函数调用 this.props.handleClick函数从 <Search> 传入家长:

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

  ...

});

附件是您原始帖子的 fiddle ，以及所需的更改。而不是记录 FROM BUTTON ，现在会发出警报 searching .

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