React.js如何生成正确的回调函数？[副本]

Question

我正在使用react.js应用程序，我记得我能够用pops将回调函数从一个孩子传递给一个家长，但我无法再次实现这一点（我希望它保持简单，没有通量库）：

所以我的父母App：

class App extends Component {
  constructor(props) {
   super(props);
 }

 showViewAction(viewToShow){
   console.log(viewToShow);
 }

  render() {
    return (
      <div>
        <AppMenu showView={this.showViewAction}/>
      </div>
    );
  }
}

和我的孩子AppMenu：

class AppMenu extends Component{

  constructor(props) {
   super(props);
 }

  showCirculares(){
    this.props.showView("circulares");
  }

  render(){

    return(
    <div>
      <MenuButton onClick={this.showCirculares} buttonTitle="SomeOtherProp"/>
    </div>
    );
  }
}

无论我尝试什么，我都会得到：

无法在showCirculares读取未定义的属性“props”；

我知道这将通过一个简单的任务解决，这是基本的React.js内容，只是我找不到解决方案！！我做错了什么？

Answer 1

您可以使用@jered said之类的bind函数显式绑定showcrourcares，也可以使用箭头函数隐式绑定到调用this的对象。

<MenuButton onClick={() => this.showCirculares()} buttonTitle="SomeOtherProp"/>

Answer 2

您需要将showCirculares与类绑定，这样它就不会有this未定义。以下是实现这一点的方法。

像这样在构造函数中绑定您的方法

constructor(props) {
   super(props);
   this.showCirculares = this.showCirculares.bind(this)
 }

  showCirculares(){
    this.props.showView("circulares");
  }

或者像这样简单地使用箭头函数

showCirculares = () => {
   this.props.showView("circulares");
}

Answer 3

看起来您需要将此上下文绑定到回调函数。在构造函数中执行以下操作：

应用程序

class App extends Component {
  constructor(props) {
   super(props);
   this.showViewAction = this.showViewAction.bind(this);
 }

 showViewAction(viewToShow){
   console.log(viewToShow);
 }

  render() {
    return (
      <div>
        <AppMenu showView={this.showViewAction}/>
      </div>
    );
  }
}

应用菜单

class AppMenu extends Component{

  constructor(props) {
   super(props);
   this.showCirculares = this.showCirculares.bind(this);
 }

  showCirculares(){
    this.props.showView("circulares");
  }

  render(){

    return(
    <div>
      <MenuButton onClick={this.showCirculares} buttonTitle="SomeOtherProp"/>
    </div>
    );
  }
}

为什么？简短的版本是，除非您绑定此，否则当您的函数运行时，此的值是未定义的。您需要的是组件的上下文，因此必须手动将函数绑定到组件。