The "React" sub-component passes the value to the parent component

The black box is the parent, the green Box is a child, and the red box is grandson. The parent passes the value to the descendants of the props; the descendants pass the value to the parent, to set the receive function and state in the parent, and to pass the function name to the descendants with props. I do not want to pass the value directly to the superior, want to add "@china" after the name, gender and "people". Take a look at the next article

vargrandson =React.createclass ({render:function () {return (            <div Style={{border:"1px solid Red", margin:"10px"}}>{ This. Props.name}:<Selectonchange={ This.props.handleselect}> <option value="male"> Men </option> <option value="female"> Women </option> </Select> </div>        )    }});varChild =React.createclass ({render:function () {return (            <div Style={{border:"1px solid Green", margin:"10px"}}>                { This. Props.name}:<input onchange={ This.props.handleval}/> <grandson name="Sex"handleselect={ This.props.handleselect}/> </div>        )    }});varParent =React.createclass ({getinitialstate:function () {return{username:"', Sex:"'}}, Handleval:function (Event){         This. SetState ({username:Event. Target.value}); }, Handleselect:function (Event) {         This. setState ({sex:Event. Target.value}); }, 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} handleselect={ This.handleselect}/> </div>        )    }}); React.render (<parent/>, document.getElementById ('Test'));

The "React" sub-component passes the value to the parent component