子组件向父组件传值
传值方法:
在父组件中定义一个回调函数,在子组件中触发这个回调
- 父组件传递一个函数
- 子组件内部接收(props)并触发该函数达到其目的
- props不可被修改
示例代码:
父组件传递一个函数:
现在要做的是,在子组件Child2.js中有一个button按钮,当我们点击这个按钮的时候,就回传一个值到父组件里面。
首先在父组件里面定义一个回调函数:
import React, { Component } from 'react'
import Child1 from './components/Child1'
import Child2 from './components/Child2'
// 父组件 父组件向子组件传值
export default class One extends Component {
state = {
hello: '我是父组件的值'
};
// 这个回调函数 要在子组件中触发
callback() {
console.log('父组件被触发')
}
render() {
// 对象结构方式,将state中的数据提取出来,赋值给另外的变量
// vue中一直是直接写:this.state.xxx
let { hello } = this.state;
// 对象结构
return (
<div>
{/* 给子组件绑定hello这个属性 */}
{/* 注意:等号右边的hello对应的是上面值的Hello,也就是要传的数据 */}
<Child1 hello={hello} />
{/* 给子组件绑定这个回调 */}
{/* this.callback对应的是上面callback函数 */}
<Child2 callback={this.callback} />
</div>
)
}
}
子组件内部接收(props)并触发该函数达到传值目的:
// 子传父
import React, { Component } from 'react'
export default class Child2 extends Component {
render() {
return (
<div>
<button onClick={() => {
// 向父组件传一个值
// 触发父组件传过来的值
this.props.callback()
}}>向父组件传值</button>
</div>
)
}
}
打开浏览器查看,点击按钮时父组件的回调执行了
此时父组件被触发,但还没有传值,接下来向父组件传值:
回到子组件Child2.js组件中:
回到父组件index.js中:
最后去浏览器运行,点击按钮查看控制台输出:子传父成功