}, 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> ); } });
</script>