Accessing/Changing Parents 来自 Child Class 的状态使用 props (React)

Question

我正在尝试使用 child 设置 parent class 的状态。但是很难弄清楚如何做到这一点。我已经抽象出任何我认为与手头问题无关的东西。问题是我

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
         )
      }
}

目前这段代码给了我"type error: this.setState is not a function"

如果您想了解有关 videojs 的更多信息：http://videojs.com/（尽管这与问题本身无关，除了我在 child 的 componentDidMount 的 videojs 调用中引用它之外)

Answer 1

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

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} />
         )
      }
}

Answer 2

试试这个，在我这边测试工作，发现代码中有两个问题

Javascript 区分大小写 coolmethod 已传递给子项，但您正在尝试访问 coolMethod.

构造函数中需要这个>this.coolMethod = this.props.coolMethod.bind(this);来继承Parent的setState函数，否则coolMethod里面的this会是undefined.

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>
      )
    }
}

Accessing/Changing Parents 来自 Child Class 的状态使用 props (React)

Accessing/Changing Parents State from Child Class using props (React)

video.js

reactjs