子组件向父组件

利用回调函数，可以实现子组件向父组件通信：父组件将一个函数作为 props 传递给子组件，子组件调用该回调函数，便可以向父组件通信。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//Parent Component
//Home
import React from 'react'
import HomeSon from '../HomeSon'

export default class Home extends React.Component{
    console = (e) =>{
        console.log(e);
    }

    render() {
        return <>
            <HomeSon cb={this.console}/>
            </>
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//Child Component
//HomeSon
import React from 'react'

export default class HomeSon extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            ...props
        }
    }

    sendToParent = (e)=>{
        this.state.cb('someThings')
    }

    render() {
        return <>
            <div onClick={this.sendToParent}>我是子组件事件体</div>
            homeSon
            </>
    }
}