码迷,mamicode.com
首页 > 其他好文 > 详细

react父子组件通讯----->下面用到的ref属性调用子组件的方法,可以实现子组件往父组件传递参数,可以通过在父组件的方法中调用子组件的方法,通过返回值来拿到值,也可以在子组件中,对数据处理完后,调用父组件传给子组件的参数或者方法,来实现传参,

时间:2017-06-20 14:54:07      阅读:162      评论:0      收藏:0      [点我收藏+]

标签:data   text   一个   颜色   als   hang   element   tar   通过   

<scripttype="text/babel">
var Child =React.createClass({
getInitialState: function() {
return {color:"",childMsg:"我是子组件的信息"};
},
changeColor: function(e) {
this.setState({color:e.target.getAttribute("data-color")});
alert(this.state.color);
return this.state.childMsg;
},
toParentMsg:function(){

 

},
render: function() {
return (
<div style={{backgroundColor: this.state.color}}className="child">
<br/>
<ul className="list-inline">
<li><ahref="#" data-color="#286090" className="btn btn-primary" onClick={this.props.parentChangeColor}>{this.props.parentMsg}</a></li>
<li><ahref="#" data-color="#31b0d5" className="btn btn-info" onClick={this.props.parentChangeColor}>{this.props.parentMsg}</a></li>
<li><ahref="#" data-color="#c9302c" className="btn btn-danger" onClick={this.props.parentChangeColor}>{this.props.parentMsg}</a></li>
<li><ahref="#" data-color="#ec971f" className="btn btn-warning" onClick={this.props.parentChangeColor}>{this.props.parentMsg}</a></li>
<li><ahref="#" data-color="#e6e6e6" className="btn btn-default" onClick={this.props.parentChangeColor}>{this.props.parentMsg}</a></li>
</ul>
</div>
);
}
});
var Child3 =React.createClass({
getInitialState: function() {
return {color:"",childMsg:"我是子组件的信息"};
},
changeColor: function(e) {
this.setState({color:e.target.getAttribute("data-color")});
alert(this.state.color);
return this.state.childMsg;
},
toParentMsg:function(e){
var msg =e.target.getAttribute("data-color");
this.props.parentChangeColor(msg);
},
render: function() {
return (
<div style={{backgroundColor: this.state.color}}className="child">
<br/>
<ul className="list-inline">
<li><ahref="#" data-color="#286090" className="" onClick={this.toParentMsg}>{this.props.parentMsg}</a></li>
<li><ahref="#" data-color="#31b0d5" className="" onClick={this.toParentMsg}>{this.props.parentMsg}</a></li>
<li><ahref="#" data-color="#c9302c" className="" onClick={this.toParentMsg}>{this.props.parentMsg}</a></li>
<li><ahref="#" data-color="#ec971f" className="" onClick={this.toParentMsg}>{this.props.parentMsg}</a></li>
<li><ahref="#" data-color="#e6e6e6" className="" onClick={this.toParentMsg}>{this.props.parentMsg}</a></li>
</ul>
</div>
);
}
});
var Parent =React.createClass({
getInitialState: function() {
return {color:"",msg1:"hello1 ref1",msg2:"hello1 ref2",msg3:"hello child3"};
},
changeColor: function(e) {
alert("data from child")
this.setState({color:e.target.getAttribute("data-color")});
},
child1ChangeColor: function(e) {
this.refs["child1"].changeColor(e);
},
child2ChangeColor: function(e) {
this.refs["child2"].changeColor(e);
},
getChild3Msg:function(msg){
alert("我是来自child3的颜色:"+msg)
},
render: function() {
return (
<div style={{backgroundColor: this.state.color}}className="parent">
<br/>
<ul className="list-inline">
<li>对应第一个child</li>
<li><ahref="#" data-color="#286090" className="" onClick={this.child1ChangeColor}>ref[child1]</a></li>
<li><ahref="#" data-color="#31b0d5" className="" onClick={this.child1ChangeColor}>ref[child1]</a></li>
<li><ahref="#" data-color="#c9302c" className="" onClick={this.child1ChangeColor}>ref[child1]</a></li>
<li><ahref="#" data-color="#ec971f" className="" onClick={this.child1ChangeColor}>ref[child1]</a></li>
<li><ahref="#" data-color="#e6e6e6" className="" onClick={this.child1ChangeColor}>ref[child1]</a></li>
</ul>
<ul className="list-inline">
<li>对应第二个child</li>
<li><ahref="#" data-color="#286090" className="" onClick={this.child2ChangeColor}>ref[child2]</a></li>
<li><ahref="#" data-color="#31b0d5" className="" onClick={this.child2ChangeColor}>ref[child2]</a></li>
<li><ahref="#" data-color="#c9302c" className="" onClick={this.child2ChangeColor}>ref[child2]</a></li>
<li><ahref="#" data-color="#ec971f" className="" onClick={this.child2ChangeColor}>ref[child2]</a></li>
<li><ahref="#" data-color="#e6e6e6" className="" onClick={this.child2ChangeColor}>ref[child2]</a></li>
</ul>
<hr/>

 

<Childref="child1"parentChangeColor={this.changeColor}parentMsg={this.state.msg1}/>
<Childref="child2"parentChangeColor={this.changeColor}parentMsg={this.state.msg2}/>
<Child3parentChangeColor={this.getChild3Msg}parentMsg={this.state.msg3}/>
</div>
);
}
});



ReactDOM.render(
<Parent/>,
document.getElementById(‘well‘)
);

 

</script>

react父子组件通讯----->下面用到的ref属性调用子组件的方法,可以实现子组件往父组件传递参数,可以通过在父组件的方法中调用子组件的方法,通过返回值来拿到值,也可以在子组件中,对数据处理完后,调用父组件传给子组件的参数或者方法,来实现传参,

标签:data   text   一个   颜色   als   hang   element   tar   通过   

原文地址:http://www.cnblogs.com/chunxm0926/p/7053751.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!