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

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

1 个答案: