var Grandson = React.createClass({
handleSelect: function(event) {
Var s = event. Target. Value + "person";
this.props.handleSelect(s);
}
render: function(){
Return (
<div style={{border: "1px solid red",margin: "10px"}}>{this.props.name}:
<select onChange={this.handleSelect}>
< option value = "male" > male < / option >
< option value = "female" > female < / option >
</select>
</div>
)
}
};
var Child = React.createClass({
handleVal: function(event) {
var v = event.target.value + "@china";
this.props.handleVal(v);
}
render: function(){
Return (
<div style={{border: "1px solid green",margin: "10px"}}>
{this.props.name}:<input onChange={this.handleVal}/>
< grandson name = "gender" handleselect = {this. Props. Handleselect} / >
</div>
)
}
};
var Parent = React.createClass({
getInitialState: function(){
Return {
username: ‘‘,
Sex: '
}
}
handleVal: function(v){
this.setState({username: v});
}
handleSelect: function(s) {
this.setState({sex: s});
}
render: function(){
Return (
<div style={{border: "1px solid #000",padding: "10px"}}>
< div > User Name: {this. State. Username} < / div >
< div > User gender: {this. State. Sex} < / div >
< child name = "name" handleval = {this. Handleval. Bind (this)} handleselect = {this. Handleselect. Bind (this)} / >
</div>
)
}
};
React.render(
<Parent / >
document.getElementById(‘test‘)
);
The "React" subassembly passes a value of 2 to the parent component