一、简述
父组件嵌套子组件，父组件的处理函数通过属性的方式赋值组子组件（
<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>
时间： 2025-01-01 15:16:33