react 父子组件传值

父组件向子组件传值—》子组件向父组件获取数据

父组件：

import React, { Component } from 'react'
import Son from './Son'
import SonTow from './SonTow'
export default class Daddy extends Component {
constructor(props) {
super(props);
this.state = {
msg: 'are you ok?'
}
}
run = () => {
alert('我是父组件的方法，我被子组件获取了')
}
render() {
return (
<div>
<Son {...this.state} run={this.run}></Son>
<p>当我们传多个state数据的时候可以用...this.state的展开方式</p>
<h3>建议使用这种方法</h3>
{<br />}
<hr />
<br />
<h3>接下来中放推荐使用，只需要在标签中传入一个this，子组件便可以通过这个this获取到父组件所有的数据-----不推荐，不推荐，不推荐</h3>
<SonTow daddy={this}></SonTow>
<p>使用时只需要用this.props.daddy(这个名称自己命名).(方法就直接点方法名称)(数据就是state.数据的名称)</p>
</div>
)
}
}

子组件：

import React, { Component } from 'react'

export default class Son extends Component {
constructor(props) {
super(props);

}

render() {
return (
<div>
<div>
{this.props.msg}
<button onClick={this.props.run}>子组件获取父组件的数据</button>
</div>
</div>
)
}
}

子组件向父组件获取值和传函数的方式是一样的

在父组件的super和constructor传入props，并通过子组件{this.props.需要传入的东西}，这样子组件就能获取到父组件的值了

在父组件定义方法函数，并在子组件的标签中使用如：run:{this.run},然后再在子组件中绑定事件如：onClick={this.props.run}也是使用this.props进行传值

子组件2：

import React, { Component } from 'react'

export default class SonTow extends Component {
constructor(props) {
super(props);

}

render() {
console.log(this.props.daddy);

return (
<div>
{this.props.daddy.state.msg}
<button onClick={this.props.daddy.run}>我第二个子组件，我来获取父组件了</button>
</div>
)
}
}

当父组件的子组件标签中传入 xxx={this}的时候，我们在子组件中就可以调用到父组件里面的所有的属性和方法—>onClick={this.props.xxx.需要的属性或方法}

子组件向父组件传值—父组件获取子组的数据

方法一：

父组件：

import React, { Component } from 'react'
import Son from './son'

export default class Test extends Component {
constructor(props) {
super(props)
this.state = {
ok: 'Are you OK'
}
}

getChildData = (result) => {
alert(result)
}
render() {
return (
<div>
<Son title={this.state.ok} run={this.run} news={this}></Son>
</div>
)
}
}

子组件：

import React, { Component } from 'react'

export default class Son extends Component {
render() {
return (
<div>
<button onClick={this.props.news.getChildData.bind(this, '我是子组件的数据')}>我能利用父组件的方法获取子组件的数据</button>

</div>
)
}
}

方法二

父组件主动获取子组件的数据和方法：

父组件代码：

import React, { Component } from 'react'
import Girl2 from './Girl2'
export default class Dadd extends Component {
constructor(props) {
super(props)
this.state = {
ok: 'Are you OK'
}
}

getSonData = () => {
this.refs.girl.run()
const girlData = this.refs.girl.state.msg
console.log(girlData);

}

render() {
return (
<div>
<button onClick={this.getSonData}>获取子组件的方法</button>
<Girl2 ref="girl"></Girl2>
</div>
)
}
}

子组件代码：

import React, { Component } from 'react'

export default class Girl extends Component {
constructor(props) {
super(props);
this.state = {
msg: 'are you ok'
}
}
run = () => {
alert('我是子组件的run方法')
}
render() {
return (
<div>

</div>
)
}
}

这边说下ref，官方并不推荐ref作为字符串来使用，官方推荐使用ref的回调函数，所以第二种父组件获取子组件数据的方式也不推荐