react.js组件传值子传父

子组件向父组件传值

传值方法：

在父组件中定义一个回调函数，在子组件中触发这个回调

1. 父组件传递一个函数
2. 子组件内部接收（props）并触发该函数达到其目的
3. 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中：

最后去浏览器运行，点击按钮查看控制台输出：子传父成功