React - 无法使用“this”在回调函数中调用组件方法

Question

我是 React 的新手，目前正在从事一个使用 exif-js 库读取图像 EXIF 数据的项目，请参阅下面的示例代码。 EXIF.getData(file, callback) 是此库中用于读取给定图像并在回调中执行其他一些任务的方法。在我的组件中，我定义了一个函数 (doSomething) 供回调使用。但是当我尝试调用函数 this.doSomething() 时，它会抛出错误：this.doSomething is not a function.

在他们的 documentation 中，他们解释说 In the callback function you should use "this" to access the image...，所以看起来 this 被用来在回调中引用文件，这就是为什么没有这样的方法文件对象。

所以问题是：如果 this 指的是库回调中的其他内容，我该如何调用同一组件中的其他函数？

import React, { Component } from 'react';
import EXIF from "exif-js"; // https://github.com/exif-js/exif-js/blob/HEAD/exif.js

export default class QuestionComponent extends Component {

    handleChange = (e) => {
        var file = e.target.files[0];
        EXIF.getData(file, function () {
            console.log(this.exifdata);
            this.doSomething(); // <====== fails here
        });
    }

    // how to call this method from the callback function above?
    doSomething () {
        console.log("...");
    }

    render() {
        return (
            <input type="file" id="file" onChange={this.handleChange}/>
        )
    }
}

谢谢！

Answer 1

您需要将 class 的 this 绑定到 doSomething 处理程序。这可以在构造函数中完成

constructor(props) {
  super(props);
  ...

  this.doSomething = this.doSomething.bind(this);
}

或更容易定义为箭头函数。

doSomething = () => {
  console.log("...");
}

然后您可以保存对 class 组件外部 this 的引用以在回调范围内结束。

handleChange = (e) => {
  const self = this;
  var file = e.target.files[0];
  EXIF.getData(file, function () {
      console.log(this.exifdata);
      self.doSomething();
  });
}

React - 无法使用“this”在回调函数中调用组件方法

React - unable to use `this` to call component methods in callback function

reactjs

exif-js