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

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

2024-10-09 03:13:40   215人阅读

<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="http://www.mamicode.com/#" data-color="#286090" className="btn btn-primary" onClick={this.props.parentChangeColor}>{this.props.parentMsg}</a></li>
<li><ahref="http://www.mamicode.com/#" data-color="#31b0d5" className="btn btn-info" onClick={this.props.parentChangeColor}>{this.props.parentMsg}</a></li>
<li><ahref="http://www.mamicode.com/#" data-color="#c9302c" className="btn btn-danger" onClick={this.props.parentChangeColor}>{this.props.parentMsg}</a></li>
<li><ahref="http://www.mamicode.com/#" data-color="#ec971f" className="btn btn-warning" onClick={this.props.parentChangeColor}>{this.props.parentMsg}</a></li>
<li><ahref="http://www.mamicode.com/#" 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="http://www.mamicode.com/#" data-color="#286090" className="" onClick={this.toParentMsg}>{this.props.parentMsg}</a></li>
<li><ahref="http://www.mamicode.com/#" data-color="#31b0d5" className="" onClick={this.toParentMsg}>{this.props.parentMsg}</a></li>
<li><ahref="http://www.mamicode.com/#" data-color="#c9302c" className="" onClick={this.toParentMsg}>{this.props.parentMsg}</a></li>
<li><ahref="http://www.mamicode.com/#" data-color="#ec971f" className="" onClick={this.toParentMsg}>{this.props.parentMsg}</a></li>
<li><ahref="http://www.mamicode.com/#" 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="http://www.mamicode.com/#" data-color="#286090" className="" onClick={this.child1ChangeColor}>ref[child1]</a></li>
<li><ahref="http://www.mamicode.com/#" data-color="#31b0d5" className="" onClick={this.child1ChangeColor}>ref[child1]</a></li>
<li><ahref="http://www.mamicode.com/#" data-color="#c9302c" className="" onClick={this.child1ChangeColor}>ref[child1]</a></li>
<li><ahref="http://www.mamicode.com/#" data-color="#ec971f" className="" onClick={this.child1ChangeColor}>ref[child1]</a></li>
<li><ahref="http://www.mamicode.com/#" data-color="#e6e6e6" className="" onClick={this.child1ChangeColor}>ref[child1]</a></li>
</ul>
<ul className="list-inline">
<li>对应第二个child</li>
<li><ahref="http://www.mamicode.com/#" data-color="#286090" className="" onClick={this.child2ChangeColor}>ref[child2]</a></li>
<li><ahref="http://www.mamicode.com/#" data-color="#31b0d5" className="" onClick={this.child2ChangeColor}>ref[child2]</a></li>
<li><ahref="http://www.mamicode.com/#" data-color="#c9302c" className="" onClick={this.child2ChangeColor}>ref[child2]</a></li>
<li><ahref="http://www.mamicode.com/#" data-color="#ec971f" className="" onClick={this.child2ChangeColor}>ref[child2]</a></li>
<li><ahref="http://www.mamicode.com/#" 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属性调用子组件的方法，可以实现子组件往父组件传递参数，可以通过在父组件的方法中调用子组件的方法，通过返回值来拿到值，也可以在子组件中，对数据处理完后，调用父组件传给子组件的参数或者方法，来实现传参，


联系
我们