如何從父組件在

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); 

我已經在搜索組件創建一個按鈕和文本組件，其中包括他們react.js覆蓋子組件的事件處理函數現在我要重寫與搜索按鈕的默認handleClick事件組件的處理程序。 但this.handleClick指向按鈕組件的事件處理..請幫助.. 我需要上單擊搜索，而不是我得到了..按鈕

Answer 1

你在這裏的比例是99％。

React使用one-way data-flow。所以，嵌套組件上的事件不會傳播給父母。

必須傳播事件手動

更改<Button>小號​​函數調用this.props.handleClick功能，從它傳遞的<Search>父：

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

    ... 

}); 

附上您的原始信息的小提琴，用所需的更改。現在它將提醒searching，而不是記錄FROM BUTTON。

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

Answer 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}。

這樣，如果在實例化Button時通過onClick支柱，它將優於Button的​​方法。