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

Question

一些背景信息:我在React中使用数据表，下面的函数/代码在componentDidMount()函数中，后面是数据表声明(下面实例化为dt)。

我试图在数据表中获得行数据，当我这样做时，它的工作-我能够得到正确的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变为null:

dt.on( 'click', 'tr', () => {
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在相同的功能，但在两个不同的上下文中?

Pastebin链接:

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

Answer 1

你可以从声明函数中单独获取对组件的引用，并在匿名函数中使用它:

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
});
});