react（子組件與父組件互相調用事件）

原文傳送門：：

 

1｀　　父組件調用子組件事件

var ButtonComponent = React.createClass({
    getDragonKillingSword: function(){
        //送寶刀
    },
    render: function(){
        return (<button onClick={this.getDragonKillingSword}>屠龍寶刀，點擊就送</button>);
    }
});
var ImDaddyComponent = React.createClass({
  render: function(){
    return (
      <div>
        //其他組件
        <ButtonComponent ref="getSwordButton"/>
        //其他組件
      </div>
    );
  }
});
//那么在父組件的邏輯里，就可以在父組件自己的方法中通過這種方式來調用接口方法：this.refs.getSwordButton.getDragonKillingSword();


//!!! 父組件希望自己能夠按鈕點擊時調用的方法，那該怎么辦呢？

//父組件可以直接將需要執行的函數傳遞給子組件：
<ButtonComponent clickCallback={this.getSwordButtonClickCallback}/>
//然后在子組件中調用父組件方法：
var ButtonComponent = React.createClass({
    render: function(){
        return (<button onClick={this.props.clickCallback}>屠龍寶刀，點擊就送</button>);
    }
});
//子組件通過 this.props 能夠獲取在父組件創建子組件時傳入的任何參數，因此 this.props 也常被當做配置參數來使用