標籤：
一、簡述
父組件嵌套子組件，父組件的處理函數通過屬性的方式賦值組子組件（
<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.value30 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>
React-組件嵌套-子組件通過委託向父組件傳值
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
