Javascript 反应ES5：将一个函数传递给另一个函数，结果为；“不是一个函数”；错误

我试图将一个函数从一个组件（CompB）传递到另一个组件（CompA）中的另一个函数，以便在

setState

完成时执行该函数

然而，我遇到了

uncaughttypeerror:CallBack不是一个函数

错误

代码段如下所示：

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

var CompA=React.createClass({
foo：函数（表单、回调）{
var=这个；
$.ajax({
url:“/someurl”，
键入：“someAction”，
数据：$（表单）.serialize（），
成功：功能（数据）{
setState（{“id”：data.id}，function（）{
回调（）；
});
},
错误：函数（数据）{
console.log（“错误”）
}
});
},
InnerCallBack:函数（SuccessCallBack）{
this.foo（$（“#some_form”）、SuccessCallBack；
},
render:function（）{
返回(
提交
)
}
})
var CompB=React.createClass({
addWords:function（）{
var bar=this.state.words；
棒推({
“someData”：“，
“文字”：“达法夫”
});
这是我的国家({
“词语”：酒吧
})
},
回调包装器：函数（事件）{
event.preventDefault（）；
this.props.passedCallBack（this.addWords（））；
},
render:function（）{
返回(
)
}
})

我的猜测和尝试： 1：我所做的研究表明了一个绑定问题。然而，这篇文章是关于ES6的。我的版本是ES5，据我所知它有自动绑定功能

2：现在我怀疑这与范围界定有关？我怀疑这行

，因为没有传递任何参数？但我认为在作为道具传递函数时不需要参数

我努力实现的目标 1：我正在试图找出导致此错误的原因和修复方法

2：这个代码片段的另一个问题是，当单击CompB中的按钮时，CompA中的onClick函数也会被触发。我知道它与DOM的事件冒泡有关，并尝试使用

evemt.preventDefault（）

来修复它，但它没有修复它。（这可能是一个单独的SO post，所以我现在不担心它）

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

您没有传递函数

• foo

  被称为

  this.foo（$（“#some_form”），SuccessCallBack在
  内部回调中

• InnerCallBack

  被称为

  this.props.passedCallBack（this.addWords（））

也就是说，您正在调用

addWords

，并将其返回值传递给

passedCallBack

passedCallBack

希望传递一个函数，但

addWords

不返回任何内容（因此它返回

undefined

）。因此，

SuccessCallBack

将是

未定义的

如果要将

addWords

作为回调传递，则不要调用它：

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

---

跟踪

foo

的调用方式表明它是通过

this.props.passedCallBack（this.addWords（））调用的

，其中传递给

this.props.passedCallBack

（

InnerCallBack

）的参数应该是回调函数

this.addWords

但是不返回函数。它返回未定义的

。如果您想将

this.addWords

作为回调传递，那么不要调用它：

this.props.passedCallBack（this.addWords）

@T.J.Crowder:

React.createClass

自动调用所有方法上的

.bind（instance）

。@FelixKling:这很奇怪，因为我在投票关闭之前尝试过，而

这个

没有正确的值。但我相信你，我一定是有点误会了。我已经投票决定重新开放。@T.J.Crowder，我想是的。createClass调用.bind？“那么我应该如何调用它？”你不需要

this.addWords

通过

CallBack（）

在

foo

中调用。您只需将函数本身传递给

passedCallBack

。“为什么this.addWords返回undefined？”因为任何没有显式返回

的函数都返回
undefined
：
函数foo（）{}；log（'返回值'，foo（））。错误消息仍然存在。是不是因为函数调用在这里没有参数
No.你在
console.log（this.addWords）
内部调用backwrapper
？函数（）{var bar=this.state.words；bar.push（{“someData”：“，”words:“dafadf”}）；所以它实际上是一个函数。那么
console.log（SuccessCallBack）是什么呢
inside
InnerCallBack
给你什么？