使用骨干object.off和react类方法回调

时间:2017-02-27 06:50:41

标签: javascript reactjs backbone.js

我正在与骨干做出反应。

我尝试了不同的方法,无法使off中的backbone方法有效,显然this.update的上下文未被主干提取/访问,无法删除它。我测试了提取this.update并将类放在使函数成为全局的前面,如MyStatic.update = function update() { // do stuff }off方法有效,但是我将this绑定到内部的方法后停止工作像some.backbone.object.on('change:total_score', MyStatic.update.bind(this));

这样的课程

也许我错过了一些明显的东西,但我是骨干的新手,我真的需要在组件willComponentMount执行后立即删除该事件。任何想法?

import React, {Component} from 'react';

class SomeClass extends Component {
  componentWillMount() {
    some.backbone.object.off('change:total_score', this.update);
    some.backbone.object.on('change:total_score', this.update);
  }


  update() {
    // do something
  }
}

更新 我已经尝试以不同的方式和上下文绑定和使用箭头函数

this.update = this.update.bind(this); //在构造函数中

const update =()=> this.update(); //在off方法之前

我现在正在做什么工作我创建了一个没有绑定的静态函数,所以Backbone可以找到引用并使用off方法删除事件然后我传递实例引用通过我已经在我的整个应用程序中声明的全局对象,而不是最优雅的方式,但它正在工作,如果有人知道如何以更好的方式修复它,那将是很棒的。

import React, {Component} from 'react';

class SomeClass extends Component {

  static myUpdate = () => {
    const context = someGlobalStore.context;
    context.update();
  }

  componentWillMount() {
    someGlobalStore.context = this;
    some.backbone.object.off('change:total_score', SomeClass.myUpdate);
    some.backbone.object.on('change:total_score', SomeClass.myUpdate);
  }

  update() {
    // do something
  }
}

1 个答案:

答案 0 :(得分:0)

每次绑定一个函数时,它都会返回一个新函数。它对原始函数或其他绑定函数有不同的引用。

我建议你做的是在构造函数中绑定函数并在componentWillMount中使用,如下所示。

import React, {Component} from 'react';

class SomeClass extends Component {
     constructor(props) {
        super(props);
        this.update = this.update.bind(this);
     }
     componentWillMount() {
        const dataTable = this.connectData();
        this.setState({
          dataTable,
         });

        some.backbone.object.off('change:total_score', this.update);
        some.backbone.object.on('change:total_score', this.update);
     }


     update() {
       // do something
     }
}

另外,如果你在babel中使用es7包。您可以在类本身中定义箭头函数,而不必使用bind。