react 父子组件传值——子传父

react中，本身没有提供主动的子传父方法，实现方式就是回调函数。由父组件通过props传递给子组件一个方法，然后通过子组件调用这个方法实现子=>父通讯。

import React, { Component } from 'react';


/**父组件 */
export default class Index extends Component {
    state = {
        msg: 0
    }
    handleChange = (msg) => {
        this.setState({
            msg
        })
    }
    render() {
        return (
            <div>
                {/* 通过props传递onChange这个方法 */}
                <SonComponent onChange={this.handleChange} msg={this.state.msg} />
            </div>
        );
    }
}


/**子组件 */
const SonComponent = (props) => {
    return (
        /**在点击事件中触发父组件的onChange方法 */
        <div onClick={()=>props.onChange(+props.msg+1)} >
            {props.msg}
        </div>
    )
}