1.16 子父组件的通信

子组件改变父组件的状态：通过父亲传递给儿子一个函数，儿子调用父亲的函数讲值传递给父亲，父亲更新值

import React,{Component} from 'react'
import ReactDOM from 'react-dom'

class Panel extends Component{
    constructor(){
        super()
        this.state={color:'primary'}
    }
    changeColor=(color)=>{
        this.setState({color})
    }
    render(){
        return(
            <div className={'container'}>
                <div className={'bg-'+this.state.color}>
                    <Header head={this.state.color} change={this.changeColor}></Header>
                </div>
            </div>
        )
    }
}
class Header extends Component{
    handleClick=()=>{
        //调用父亲方法
        console.log(this.props)
        this.props.change('success')
    }
    render(){
        return(
            <div className={'panel-heading'}>
                <p>{this.props.head}</p>
                <button className={'btn btn-danger'} onClick={this.handleClick}>改变颜色</button>
            </div>
        )
    }
}
ReactDOM.render(<Panel></Panel> ,document.getElementById('root'))

预览效果：注意父组件更新的同时，子组件也更新了