標籤:
黑色框為父,綠色框為子,紅色框為孫子。父向子孫傳值用props;子孫向父傳值,要在父設定接收函數和state,同時用props將函數名傳入子孫。問題來了我不想直接傳值給上級,想在姓名後面加“@china”,性別後面加“人”。請看下一篇
var Grandson = React.createClass({ render: function(){ return ( <div style={{border: "1px solid red",margin: "10px"}}>{this.props.name}: <select onChange={this.props.handleSelect}> <option value="男">男</option> <option value="女">女</option> </select> </div> ) }});var Child = React.createClass({ render: function(){ return ( <div style={{border: "1px solid green",margin: "10px"}}> {this.props.name}:<input onChange={this.props.handleVal}/> <Grandson name="性別" handleSelect={this.props.handleSelect}/> </div> ) }});var Parent = 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>使用者姓名:{this.state.username}</div> <div>使用者性別:{this.state.sex}</div> <Child name="姓名" handleVal={this.handleVal} handleSelect={this.handleSelect}/> </div> ) }});React.render( <Parent />, document.getElementById(‘test‘));
【react】子組件向父組件傳值