React中事件处理程序的奇怪行为

Question

我想知道是否有人可以解释这种行为的原因：

如果来自onChange元素的<input>事件我已设置为指向此方法：

private PasswordChanged = (event: any) => {
    this.setState((prevState: IWifiState, props: IWifiProps) => {
        prevState.Password = event.target.value;
        return prevState;
    });
}

这让我有以下错误：

第27行恰好是对粘贴代码的event.target.value的调用。

如果我改为代码那样：

private PasswordChanged = (event: any) => {
    const password = event.target.value;
    this.setState((prevState: IWifiState, props: IWifiProps) => {
        prevState.Password = password;
        return prevState;
    });
}

它只是按预期工作......任何人都可以解释原因？

谢谢！

Answer 1

React做了一个名为Event Pooling的事情。

这实质上意味着，出于性能考虑，它们会重复使用事件。

当您致电setState时，内部对象可能无法重复使用，因为它可能会以您不希望的方式运行（一旦事件发生，属性就会被取消）服务于它的目的）。

最好将变量中的引用保存为所需的值，然后再使用它。

基本上，您正在访问它asynchronously（在setState函数内），建议不要这样做。

有一种解决方法，但我也建议反对它。

  

如果要以异步方式访问事件属性，则应在事件上调用event.persist（），这将从池中删除合成事件，并允许用户代码保留对事件的引用。