在没有箭头功能的情况下在回调中实际访问setState

Question

我正在为企业内部网开发代码。一旦使用箭头功能构建了基础，我就在Internet Exploder中进行了测试。发现它不会接受箭头功能。我正在将React用于该项目，并且此后重构了所有代码以使用经典函数调用。

除了一个小故障外，它通常都起作用：我无法从函数调用内部访问它。

这里是一个代码示例，尽管还有其他示例：

<NavLink onClick={function () { 
    this.setState({ openCount: item.pageId }); 
    this.props.CurrentPage_Update(item) 
    }
} 
className="menu menu-link" 
key={"DDNavLink_" + item.pageId}>
{item.title}
</NavLink>

如何为我所有的函数调用访问'this'对象？我尝试按var set=this.setState;的顺序创建变量，但是尽管它确实适用于绑定函数，但失败了。

尽管我已经了解了babel，但是我不确定它的用途和功能，我不确定该去哪里，特别是对于这样一个看似简单的重构。

谢谢

Answer 1

在每个函数调用的末尾，我使用.bind（this）使函数能够使用外部this而不是内部。

//blah blah blah
}.bind(this)

我发现如果在函数中有任何对此的调用，则必须在每个大括号的结尾处执行此操作。我计划使它成为每个经典函数调用的习惯，无论是否必要。

Answer 2

如果您在项目上安装了eslint-plugin-react，则可能为此特定规则引发以下警告或错误：react/jsx-no-bind。

您可以执行此操作而不是调用.bind(this)：

首先，您定义一种处理click事件的方法：

handleClick() => {
  this.setState({ openCount: item.pageId }); 
  this.props.CurrentPage_Update(item); 
}

然后，将handleClick()方法附加到NavLink的onClick事件。

<NavLink 
  onClick={() => handleClick()}
  className="menu menu-link" 
  key={"DDNavLink_" + item.pageId}>
  {item.title}
</NavLink>