如何从react.js中的父组件覆盖子组件的事件处理函数 [英] How to override event handler function of child component from parent component in react.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是指向按钮组件的事件处理程序..请帮助..
i需要从搜索点击，而不是我从FROM BUTTON ..

I have created a button and text component and included them in a search component now i want to override the default handleClick event of button with search component's handler. But this.handleClick is pointing to button component's event handler.. please help.. i need FROM SEARCH on click instead i got FROM BUTTON..

推荐答案

你有99％的百分比。

React使用单向数据流。所以，嵌套组件的事件不会传播给他们的父母。

React uses a one-way data-flow. So, events on nested components will not propagate to their parents.

你必须手动传播事件

更改< Button> s handleClick 函数调用 .props.handleClick 函数传递自< Search> parent：

Change your <Button>s handleClick function to call the this.props.handleClick function passed in from it's <Search> parent:

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

  ...

});

附件是原始帖子的小提琴，需要更改。而不是记录 FROM BUTTON ，它现在将提醒搜索。

Attached is a fiddle of your original post, with the required change. Instead of logging FROM BUTTON, it will now alert searching.

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

这篇关于如何从react.js中的父组件覆盖子组件的事件处理函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！