javascript - TypeScript中的“This”范围

在我的网页上，我删除了表格中的行上的图标，如下所示:



我正在使用TypeScript，在该脚本中我附加了onClick监听器以执行名为OnRemoveClick的函数，例如$('.remove').click(this.OnRemoveClick);OnRemoveClick将2个字段清零(在单击删除图标的行上)，然后执行2个函数，如下所示:

private OnRemoveClick(): void {
    $(this).parents('tr').find('.input-qty').val('0');
    $(this).parents('tr').find('.sub-total').html('0');
    this.GetInputFieldsToJson();
    this.CalculateTotal();
}

我的问题是，当我得到GetInputFieldsToJson时，它掉了下来:



我意识到这是因为this上下文中的OnRemoveClick附加到HTMLAnchorElement上，这意味着我无法从那里访问我的函数。

我尝试过的

我尝试过使用lambda表达式设置onClick监听器，如下所示:
$('.remove').click(() => this.OnRemoveClick);
但这意味着该行上两个零字段的jQuery表达式不再起作用

最佳答案

您可能已经了解，这里的问题是，当事件处理程序被调用时，默认上下文作为触发该事件的dom元素。因此，您无法使用该引用来调用对象的方法。

有多种解决方案，一个简单的解决方案是使用Function.bind()将自定义上下文传递给回调函数，如下所示，并使用Event.currentTarget在回调中访问目标元素，例如

private OnRemoveClick(e): void {
    $(e.currentTarget).parents('tr').find('.input-qty').val('0');
    $(e.currentTarget).parents('tr').find('.sub-total').html('0');
    this.GetInputFieldsToJson();
    this.CalculateTotal();
}

然后

$('.remove').click(this.OnRemoveClick.bind(this));