数据表 - 在两个不同的上下文中使用“this”关键字

问题描述

一些背景信息：我将 DataTables 与 React 一起使用，下面的函数/代码位于 DataTables 声明之后的 componentDidMount() 函数中（下面实例化为 dt）。

我正在尝试获取 DataTables 中的行数据，当我这样做时，它有点工作 - 我能够获得正确的 startupId，但是 this.setState() 未定义，因为 this在函数中未定义：

dt.on( 'click','tr',function() {
        var tr = $(this).closest('tr'); 
        var row = dt.row( tr );
        var startupId = row.data().id;
        this.setState({
            viewStartup: true
        });
    });

但是，当我改用箭头函数时（如下所示），我可以正确使用 this.setState()，但 startupId 变为空：

dt.on( 'click',() => {
        var tr = $(this).closest('tr'); 
        var row = dt.row( tr );
        var startupId = row.data().id;
        this.setState({
            viewStartup: true
        });
    });

我想我已经将箭头函数案例中的问题缩小到 $(this) 因为在箭头函数案例中，this 指的是一个不同的上下文，它不是当前选定的行，就像它在function(){} 情况。

据我所知，您无法在 JavaScript 中更改 this 的上下文，因此有人对如何获得正确的 startupId 以及正确的 this.setState() 上下文有任何建议吗？ ?换句话说，我如何在同一个函数中但在两个不同的上下文中使用 this？

粘贴链接：

• index.html 文件：https://pastebin.com/vcVCJ7d9
• Table.js 文件：https://pastebin.com/0GdY5KfZ

解决方法

您可以单独获取对组件的引用而不是声明函数并在匿名函数中使用它：

const component = this;
dt.on('click','tr',function() {
  var tr = $(this).closest('tr'); 
  var row = dt.row( tr );
  var startupId = row.data().id;
  component.setState({
    viewStartup: true
  });
});