解决思路:可以父组件给子组件传递一个事件,子组件接收这个事件,调用它,就会触发父组件中的方法,可以改变父组件的state
子组件:
class Child extends React.Component {
onClick = () => {
this.props.setParentState(3)
}
render() {
return <button onClick={this.onClick}>修改父组件state</button>
}
}
父组件:
class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {
number:5
}
}
setSelfState = (i) => {
this.setState({
number: i
})
}
render() {
return <div>
{this.state.number}
<Child
setParentState={this.setSelfState}
/>
</div>
}
}
但是问题并没有解决
我们知道,这里的this对象是调用这个函数的主体,正常的this打印出来是这样的
但是我们在通过子组件调用父组件时this对象却改变了 打印出来是这样的
仅仅是组件dom上的一些属性,这当然是会报错的 ,所以要使this对象指向父组件
。需要在构造函数里加入一条绑定this的语句,改造好的构造函数如下:
constructor(props) {
super(props);
this.state = {
number:5
}
this.setSelfState =this.setSelfState .bind(this)
}
这样就可以了