React ES5：将函数传递给另一个函数导致“not a function”错误

Question

我试图将一个函数从一个组件（CompB）传递到另一个组件（CompA）中的另一个函数，因此它将在setState完成时执行。

但是，我遇到了Uncaught TypeError: CallBack is not a function错误。

代码段如下：

var CompA = React.createClass({

  foo: function(form, CallBack){
    var that = this;
    $.ajax({
      url: '/someurl',
      type: 'someAction',
      data: $(form).serialize(),
      success: function(data) {
        that.setState({"id": data.id}, function(){
          CallBack();
        });
      },
      error: function(data) {
        console.log("Error")
      }
    });
  },

  InnerCallBack: function(SuccessCallBack){
    this.foo($("#some_form"), SuccessCallBack); 
  },


  render:function(){
    return(
      <CompB passedCallBack = {this.InnerCallBack} />
      <button onClick={this.submit}>Submit</button>
    )
  }
})

var CompB = React.createClass({
  addWords: function(){
    var bar = this.state.words;

    bar.push({
       "someData": "",
       "words": "dafadf"
    });

    this.setState({
      "words" : bar
    })
  },

  callbackWrapper: function(event) {
    event.preventDefault();
    this.props.passedCallBack(this.addWords());
  },

  render: function(){
    return(
      <button onClick={this.callbackWrapper}>
    )
  }
})

我的猜测和尝试：1：我在SO上所做的研究提出了一个约束性问题。但是，这篇文章是关于ES6的。我的版本是ES5，据我所知，它具有自动绑定功能？

2：现在我怀疑它与范围有关吗？我怀疑这行<CompB passedCallBack = {this.InnerCallBack} />因为没有传递参数？但我认为在反应中传递一个函数，因为道具不需要参数？

我试图实现的目标1：我试图找出导致此错误的原因以及解决问题的方法。

2：我对此代码片段的另一个问题是，当单击CompB中的按钮时，也会触发CompA的onClick函数。我知道它与DOM的事件冒泡有关，并试图使用evemt.preventDefault()修复它，但它没有解决它。（这可能是一个单独的SO帖子，所以我不担心它在这一点）

Answer 1

将函数传递给另一个函数导致“非函数”错误

你没有传递一个功能。

• foo在this.foo($("#some_form"), SuccessCallBack);被称为InnerCallBack。
• InnerCallBack被称为this.props.passedCallBack(this.addWords());

即你正在调用addWords并将其返回值传递给passedCallBack。 passedCallBack希望传递一个函数，但addWords不返回任何东西（因此它返回undefined）。因此SuccessCallBack将是undefined。

如果您打算将addWords作为回调传递，则不要调用它：

this.props.passedCallBack(this.addWords);
//                                    ^^ no calling parenthesis here