React中的事件是合成的,在使用的时候和原生的不太一样,一不小心就会入坑,看看下面的例子:

上面的demo中,当你在输入框中输入内容的时候,就会报错:

This synthetic event is reused for performance reasons. If you

报错的主要原因就是React的Event不能用于异步方法中:this.setState((oldState)=>({value:ev.target.value}))后面的回调方法是异步方法。

正确的写法如下:

上面第二种是官方推荐的,因为React的事件会被重复使用,使用ev.persist()可以保留单独引用。

上面的第三种方式只是在某些情况下使用,因为ev.target.value是字符串,所以可以立即取出来,但是其他情况,如:this.setState({clickEvent: event}),这种将整个对象保存起来则是不对的,因为事件在后续可能发生变化。其他例如setTimeout使用的时候也需要注意这种问题。

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字