一、簡述
父組件嵌套子組件，父組件的處理函數通過屬性的方式賦值組子組件（
<GenderSelect handleSelect={this.handleSelect}></GenderSelect>
），子組件通過觸發事件，委托調用父組件的處理函數，從而實現把值傳給父組件（return <select onChange={this.props.handleSelect}>，
handleSelect: function(event) {
this.setState({gender: event.target.value})
}
）
二、代碼
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>父子關系</title> 6 </head> 7 <body> 8 <script src="./react-0.13.2/react-0.13.2/build/react.js"></script> 9 <script src="./react-0.13.2/react-0.13.2/build/JSXTransformer.js"></script> 10 <script type="text/jsx"> 11 var GenderSelect = React.createClass({ 12 render: function() { 13 return <select onChange={this.props.handleSelect}> 14 <option value="0">男</option> 15 <option value="1">女</option> 16 </select> 17 } 18 }) 19 var SignupForm = React.createClass({ 20 getInitialState: function() { 21 return { 22 name: '', 23 password: '', 24 gender: '', 25 } 26 }, 27 handleChange: function(name, event) { 28 var newState = {} 29 newState[name] = event.target.value 30 this.setState(newState) 31 }, 32 handleSelect: function(event) { 33 this.setState({gender: event.target.value}) 34 }, 35 render: function() { 36 console.log(this.state) 37 return <form> 38 <input type="text" placeholder="請輸入用戶名" onChange={this.handleChange.bind(this, 'name')} /> 39 <input type="password" placeholder="請輸入密碼" onChange={this.handleChange.bind(this, 'password')} /> 40 <GenderSelect handleSelect={this.handleSelect}></GenderSelect> 41 </form> 42 } 43 }) 44 React.render(<SignupForm></SignupForm>, document.body); 45 </script> 46 </body> 47 </html>