First, brief
The parent component nests a child component, and the parent component's handler function assigns a value to the group sub-component by way of the property (
<genderselect handleselect={this.handleselect}></genderselect>
), the child component invokes the parent component's handler function by triggering the event, thereby passing the value to the parent component (return <select onchange={this.props.handleselect}>
Handleselect:function (event) {
This.setstate ({gender:event.target.value})
}
）
Second, the Code
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>
react-Component Nesting-child components passing values to parent components via delegates
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
