javascript - react的refs和event

问题描述

问 题

用react要取得文本框的值的时候，有的用ref有的用event.target.value来取这个值。我想问问这两个有什么区别？都推荐用event而不用ref，为什么这么做？

解决方案

实际上两种方法都可以，但也都有自己的好处和坏处：

event.target 获取的是事件触发时的 DOM 对象，一般来说用它即可。但有的时候事件触发后你想要的对象未必是 event.target，这时候传统的方法（或者 jQuery）需要访问 DOM tree 去获得你想要的 DOM 对象，而 ref 在 render 之后就把对应节点的引用给你了，所以减少对访问 DOM 的依赖和消耗。

但 ref 在动态生成节点时派不上用处，比方说你的表单是通过一个集合的对象渲染而成，你在 render 方法中使用诸如 map 的技巧来编写视图，事件触发时需要动态的获取当前的 event.target，这种场景就不是 ref 的菜。

不过 React 的 event 不是真正的 DOM event，它有一个特点即在下一个 event loop 里就会被释放掉，换句话说如果你有这样的处理方法：

somethingOnEvent(event) {
  window.setTimeout(() => {           // or any async processing
    doSomethingWith(event.target);    // you can not rely on this `event.target`
  }, 0);
}

那么这里的 event.target 是获取不到的，同时 React 会提示你这个问题，解决的方法是持久化这个 event 对象，即先 event.persist()。这一点尤其要在对 event handler 进行二次包装时（比如 lodash.debounce 它）注意。

这篇关于javascript - react的refs和event的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！