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

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()进行修复，但并未对其进行修复。点）

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