契机:最近有在一则简书 https://www.jianshu.com/p/f1958db7234c 中认知到 useRef 的返回对象里有个.current.contains 这样的方法(该例子讲的是如何点击指定 ref 以外的内容来触发某个方法)。
正好今天有空,查了一下,发现描述比较少,可能搜索用的关键词不得要领。
大致查到了如下几个线索:
https://developer.mozilla.org/zh-CN/docs/Web/API/Node/contains
https://developer.mozilla.org/zh-CN/docs/Web/API/DOMTokenList/contains
首先是node.contains( otherNode )
,原生的 js 节点对象上有这个方法,表示传入的节点是否为该节点的后代节点。Element.classList
这样得到的 DOMTokenList 对象也有.contains 方法,不过此时传入的值是类名
https://bobbyhadz.com/blog/react-check-if-element-has-class
这个网站的例子向我展示了在 react 中后者的两种应用——ref.current.classList.contains('my-class')
以及event.currentTarget.classList.contains('my-class')
。
这么一来,我才醒悟,我并不知道 react 中的 ref 和 event 具体多了哪些其实很有用的新方法(除了 react 官网介绍的那些),想找个更全一点的,类似 mdn 上那样很全的对象描述。
有找到一篇 https://blog.logrocket.com/complete-guide-react-refs/ 这样的 ref 指南,
想问问各位 v 友还有没有其他的相关好文推荐
1
anjianshi 2022-07-15 14:16:43 +08:00 1
这是浏览器 DOM 自带的方法。和 React 没有关系。
你这里 ref.current 的值就是一个浏览器原生的 DOM 节点。 想知道所有可以用的属性和方法,就看 MDN 就够了。 https://developer.mozilla.org/zh-CN/docs/Web/API/Element https://developer.mozilla.org/zh-CN/docs/Web/API/Node 把里面的“属性”方法“挨个了解一遍 |