标签：
一、简述
父组件嵌套子组件，父组件的处理函数通过属性的方式赋值组子组件（
<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>
标签：
原文地址：http://www.cnblogs.com/shamgod/p/5058383.html
