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

时间:2016-06-29 14:25:42

标签: reactjs

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

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

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

这让我有以下错误:

Error

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

如果我改为代码那样:

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

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

谢谢!

1 个答案:

答案 0 :(得分:5)

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

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

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

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

基本上,您正在访问它asynchronously(在setState函数内),建议不要这样做。

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

  

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