react子组件修改父组件state的方法

解决思路:可以父组件给子组件传递一个事件,子组件接收这个事件,调用它,就会触发父组件中的方法,可以改变父组件的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) 
    }

这样就可以了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值