子组件改变父组件的状态:通过父亲传递给儿子一个函数,儿子调用父亲的函数讲值传递给父亲,父亲更新值
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'))
预览效果:注意父组件更新的同时,子组件也更新了