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 也常被当做配置参数来使用

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM