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

<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>

转载于:https://www.cnblogs.com/chunxm0926/p/7053751.html