码迷,mamicode.com
首页 > 其他好文 > 详细

react----父子组件之间的参数传递

时间:2017-08-10 11:51:45      阅读:108      评论:0      收藏:0      [点我收藏+]

标签:event   css   点击测试   set   blog   header   from   button   ade   

1.父组件向子组件传递参数

 1 //父组件
 2 import React from ‘react‘;
 3 import ‘./header.css‘
 4 import ComponentChild from ‘./headerChild‘
 5 class ComponentHeader extends React.Component {
 6   constructor () {
 7     super()
 8     this.state = {
 9       username: ‘Song‘,
10       age: 18
11     }
12   }
13   render () {
14     return (
15       <div>
16         <ComponentChild name="dongdong"/>//子组件
17         <p>这是一个测试组件</p>
18         <p>{this.state.age}</p>
19       </div>   
20     )
21   }
22 }
23 export default ComponentHeader
24 
25 //子组件
26 import React from ‘react‘
27 class ComponentChild extends React.Component {  
28   render () {
29     return (
30       <div>
31         <p>{this.props.name}</p>//通过this.props.key来过去父组件传递过来的数据
32       </div>
33     )
34   }
35 }
36 export default ComponentChild

2.子组件向父组件传递参数

 1 //子组件
 2 import React from ‘react‘
 3 class ComponentChild extends React.Component {  
 4   render () {
 5     return (
 6       <div>
 7         <button>点击测试:<input type="text" onChange={this.props.handleChange}/></button>//通过函数的形式将参数传递给父组件
 8         <p>{this.props.name}</p>
 9       </div>
10     )
11   }
12 }
13 export default ComponentChild
14 
15 //父组件
16 import React from ‘react‘;
17 import ‘./header.css‘
18 import ComponentChild from ‘./headerChild‘
19 class ComponentHeader extends React.Component {
20   constructor () {
21     super()
22     this.state = {
23       username: ‘Song‘,
24       age: 18
25     }
26   }
27   handleChange (event) { // 这个函数是可以用来获取子组件传递过来的数据
28     this.setState({age:event.target.value})//使用setState将子组件传递过来的值,设置给父组件中的state
29   }
30   render () {
31     return (
32       <div>
33         <ComponentChild handleChange={this.handleChange.bind(this)} name="dongdong"/> //这里注意一定要使用bind(this)改变this的指向,否则会报错,显示找不到this
34         <p>这是一个测试组件</p>
35         <p>{this.state.age}</p>
36       </div>   
37     )
38   }
39 }
40 export default ComponentHeader

 这里面注意一点,state是属于组件的私有属性的,props属于外来属性

react----父子组件之间的参数传递

标签:event   css   点击测试   set   blog   header   from   button   ade   

原文地址:http://www.cnblogs.com/songdongdong/p/7338131.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!