React.js 如何创建一个正确的回调属性函数？

Question

我正在使用React.js应用程序，并且我记得我曾经能够通过props将子组件中的回调函数传递给父组件，但是现在我无法再次实现这个功能（我想保持简单，不使用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内容，只是我找不到解决方案！我做错了什么？

- Karlo A. López

---

MenuButton是什么？它是你从库中获取的按钮组件还是自己制作的？ - Andrew

Answer 1

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

App

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的值是未定义的。您想要的是组件的上下文，因此您必须手动将函数绑定到它。

- jered

---

我认为情况并非如此。只有在需要保留父级上下文时才需要使用 bind。在这种情况下，只需使用简单的 console.log 即可。 - Andrew

我完全同意你的说法，这是我考虑要评论的内容。但我认为他/她遇到的问题比每个人都假定的简单的“绑定”要深得多。 - Andrew

非常感谢，现在我更好地理解了绑定和箭头函数回调。 - Karlo A. López

@KarloA.López 你的问题已经通过 bind 得到解决了吗？ - Andrew

那肯定是你的 MenuButton 出了问题。App 不需要绑定，但保持良好的习惯还是很重要的。 - Andrew

Answer 2

你需要将showCirculares与类绑定，以避免出现未定义的this。以下是实现此操作的方法。

在构造函数中按如下方式绑定你的方法

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

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

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

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

- Prakash Sharma

---

{btsdaf} - Felix Kling

@FelixKling 我假设 OP 正在使用 Babel 编译器。Babel 不会处理这个吗？ - Prakash Sharma

如果配置正确，是的。 - Felix Kling

Answer 3

您可以使用 bind 函数明确绑定 showCirculares，就像 @jered 所说的那样，或者您可以使用箭头函数，这些函数隐式地绑定到调用的 this。

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

- Luke