react 父子组件通讯

来源：互联网发布：软件专利实用新型编辑：程序博客网时间：2024/05/07 05:58
<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>
阅读全文
0 0