Question

我正在尝试使用子设置父类的状态。但无法弄清楚如何做到这一点。我已经抽出了任何我认为与手头问题无关的东西。问题是我

Class Parent extends Component {
     constructor(props){
      super(props)
       this.state = {
         foo: "bar"
       }
     }
     coolMethod(n){
        this.setState({foo: n})
     }
     render{
        return(
          <Child coolmethod={this.coolMethod} />
         )
      }
}

Class Child extends Component {
     constructor(props){
      super(props)
     }
     componentDidMount(){ 
      let that = this;
       videojs('my-player', options, function onPlayerReady() {
         this.on('end',()=>{
           that.props.coolMethod(<whatever string returns as a result of 
           this method>)
         })
       })
     }
     render{
        return(
          // irrelevant stuff to this question
         )
      }
}

目前这段代码给我“类型错误：this.setState不是函数”

如果你想了解更多关于videojs的信息：http://videojs.com/（虽然这与问题本身无关，除了我在我的videojs中在孩子的componentDidMount中调用它的事实）

Answer 1

我假设第二课是Class Child extends Component ...。您需要先在this.coolMethod构造函数中绑定Parent。

＆＃13;

Class Parent extends Component {
     constructor(props){
      super(props)
       this.state = {
         foo: "bar"
       }
       
       this.coolMethod = this.coolMethod.bind(this);
     }
     
     coolMethod(n){
        this.setState({foo: n})
     }
     render{
        return(
          <Child coolmethod={this.coolMethod} />
         )
      }
}

＆＃13;

Answer 2

试试这个，在我身边测试过，在代码中发现了两个问题

Javascript区分大小写coolmethod已传递给子级，但您尝试访问coolMethod。

你需要这个＆gt;构造函数中的this.coolMethod = this.props.coolMethod.bind(this);从Parent继承setState函数，否则this内的coolMethod将是未定义的。

import React, { Component } from 'react';

export default class Parent extends Component {
  constructor(props){
    super(props)
    this.state = {
      foo: "bar"
    }
  }

  coolMethod(n){
      this.setState({foo: n})
  }

  render(){
      return(
        <Child coolMethod={this.coolMethod} />
      )
    }
}

class Child extends Component {
  constructor(props){
    super(props)
    this.coolMethod = this.props.coolMethod.bind(this);
  }

  render(){
      return(
        <button onClick={() => this.coolMethod("aabbcc")}>1</button>
      )
    }
}

使用道具访问/更改子类的父母状态（React）

2 个答案: