react input 取值

react input 取值问题

在一个项目中，有要对一个input框取值，想当然的直接就用event.target.value 去取了，并且当时测试浏览器是IE，就一直在找是不是IE兼容性问题，但是是react封装过的事件系统，应该不存在兼容性问题才对，然后还对比了另外用到的input取值，都是OK的，一度陷入了死循环。

后面偶然看到 e.persist()，当时并不知道是神马东西，试用了一下，居然是ok的，然后立马修改提交代码。 当然，事后是要查下这个到底是神马东西的，google了一下，也终于知道为什么先前取不到值了。因为我异步了?。

react对所有事件都进行了处理，所以是不会有兼容性问题的。React事件处理将接受SyntheticEvent实例，它封装了浏览器原生事件对象，并对浏览器做了兼容。他和浏览器原生事件对象有相同的接口，包括stopPropagation()和preventDefault()。如果出于某些原因想使用浏览器原生事件，可以使用 nativeEvent 属性获取。每个SyntheticEvent对象都有下面的属性：

boolean bubbles
boolean cancelable
DOMEventTarget currentTarget
boolean defaultPrevented
number eventPhase
boolean isTrusted
DOMEvent nativeEvent
void preventDefault()
boolean isDefaultPrevented()
void stopPropagation()
boolean isPropagationStopped()
DOMEventTarget target
number timeStamp
string type

合成事件是池化的，也就是说SyntheticEvent对象会被重用，而且当事件回调函数被执行后所有的属性将被销毁。这也是出于性能的考虑。因此你不能异步访问event。但是我event.persist()这个是react提供的，它将从事件池中取出合成的事件，并允许该事件的引用，使用户的代码被保留。然后就能很开心的取值了。

转载于:https://juejin.im/post/5badf2ecf265da0ac55e5b52