react 父子组件通讯

< script type= "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 >< a href= "#" data-color= "#286090" className= "btn btn-primary" onClick={ this. props. parentChangeColor} >{ this. props. parentMsg} </ a ></ li >

< li >< a href= "#" data-color= "#31b0d5" className= "btn btn-info" onClick={ this. props. parentChangeColor} >{ this. props. parentMsg} </ a ></ li >

< li >< a href= "#" data-color= "#c9302c" className= "btn btn-danger" onClick={ this. props. parentChangeColor} >{ this. props. parentMsg} </ a ></ li >

< li >< a href= "#" data-color= "#ec971f" className= "btn btn-warning" onClick={ this. props. parentChangeColor} >{ this. props. parentMsg} </ a ></ li >

< li >< a href= "#" 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 >< a href= "#" data-color= "#286090" className= "" onClick={ this. toParentMsg} >{ this. props. parentMsg} </ a ></ li >

< li >< a href= "#" data-color= "#31b0d5" className= "" onClick={ this. toParentMsg} >{ this. props. parentMsg} </ a ></ li >

< li >< a href= "#" data-color= "#c9302c" className= "" onClick={ this. toParentMsg} >{ this. props. parentMsg} </ a ></ li >

< li >< a href= "#" data-color= "#ec971f" className= "" onClick={ this. toParentMsg} >{ this. props. parentMsg} </ a ></ li >

< li >< a href= "#" 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 >< a href= "#" data-color= "#286090" className= "" onClick={ this. child1ChangeColor} >ref[child1] </ a ></ li >

< li >< a href= "#" data-color= "#31b0d5" className= "" onClick={ this. child1ChangeColor} >ref[child1] </ a ></ li >

< li >< a href= "#" data-color= "#c9302c" className= "" onClick={ this. child1ChangeColor} >ref[child1] </ a ></ li >

< li >< a href= "#" data-color= "#ec971f" className= "" onClick={ this. child1ChangeColor} >ref[child1] </ a ></ li >

< li >< a href= "#" data-color= "#e6e6e6" className= "" onClick={ this. child1ChangeColor} >ref[child1] </ a ></ li >

</ ul >

< ul className= "list-inline" >

< li >对应第二个child </ li >

< li >< a href= "#" data-color= "#286090" className= "" onClick={ this. child2ChangeColor} >ref[child2] </ a ></ li >

< li >< a href= "#" data-color= "#31b0d5" className= "" onClick={ this. child2ChangeColor} >ref[child2] </ a ></ li >

< li >< a href= "#" data-color= "#c9302c" className= "" onClick={ this. child2ChangeColor} >ref[child2] </ a ></ li >

< li >< a href= "#" data-color= "#ec971f" className= "" onClick={ this. child2ChangeColor} >ref[child2] </ a ></ li >

< li >< a href= "#" data-color= "#e6e6e6" className= "" onClick={ this. child2ChangeColor} >ref[child2] </ a ></ li >

</ ul >

< hr />

< Child ref= "child1" parentChangeColor={ this. changeColor} parentMsg={ this. state. msg1} />

< Child ref= "child2" parentChangeColor={ this. changeColor} parentMsg={ this. state. msg2} />

< Child3 parentChangeColor={ this. getChild3Msg} parentMsg={ this. state. msg3} />

</ div >

);

}

});

ReactDOM. render(

< Parent />,

document. getElementById( 'well')

);

< / script >