Question

我正在使用react.js应用程序，我记得我能够将一个回调函数从一个孩子传递给一个带有pop的父母，事情是我无法再做到这一点（我想保持它很简单，没有Flux库）：

所以我的父母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

看起来您需要将this上下文绑定到回调函数。在构造函数中这样做：

应用

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

AppMenu

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

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

Answer 2

您需要将this与类绑定，以使其未定义constructor(props) { super(props); this.showCirculares = this.showCirculares.bind(this) } showCirculares(){ this.props.showView("circulares"); }。以下是实现此目的的方法。

在构造函数中绑定您的方法，如下所示

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

或者只是使用像这样的箭头功能

Virtus::InstanceMethods::Constructor

Answer 3

您可以使用像@jered所说的bind函数显式绑定<MenuButton onClick={() => this.showCirculares()} buttonTitle="SomeOtherProp"/>，或者您可以使用箭头函数，这些函数隐式绑定到调用它。

{{1}}

React.js如何制作正确的回调道具功能？

3 个答案: