2-2 子传父数据 demo

import ReactDOM from 'react-dom';
import React from 'react';

//子传父
class ParentCom extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          childData : null
        }
    }

    render() {
        return (
            <div>
                <h1>子元素传递给父元素的数据：{ this.state.childData }</h1>
                <ChildCom setChildData = { this.setChildData } />
            </div>
        )
    }

    setChildData = (data) => {
        this.setState({
            childData: data
        })
    }
}

class ChildCom extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            msg: "Hello World!"
        }
    }

    render() {
        return(
            <div>
                <button onClick = { this.sendData }>传递 hello world 给父元素</button>
                <button onClick = { () => { this.props.setChildData("Hello") }}>传递 hello 给父元素 </button>
            </div>
        )
    }

    // 将子元素传递给父元素，实际就是调用父元素传递进来的父元素函数
    sendData = () => {
        this.props.setChildData(this.state.msg);
    }
}
ReactDOM.render(<ParentCom />, document.querySelector("#root"));