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(),这将从池中删除合成事件,并允许用户代码保留对事件的引用.