当渲染完成时,会执行ref函数,并且将这个input实际节点传给函数的参数node,而在这个函数中,this指向的组件,所以我们只要在组件渲染后,在组件内使用this调用这个实际节点
这是赋一个回调函数作为ref的值。在此组件挂载(mount)后,React将会自动调用ref中赋给的回调函数,回调函数中可以得到一个传参,即是真实DOM元素的参照。所以这个语法,可以取得组件挂载的真实DOM元素的参照,称为"背后支持实例(Backing Instance)",利用这个参照可以对真实的DOM元素作获取值、更动属性值等等之类的事。这就像在纯JS中用getElementById
得到某个DOM元素的参照一样。
认真地来说,这种ref的取值语法已经过多次的修改。为了防止在组件未在网页上挂载完成时,就想要取ref值的情况,所以这语法才会设计成这样子。之前是直接赋一个字符串给ref的,或是用其它的方法来取这ref的参照值,大部份都已经弃用,或是已经接近准备弃用的情况。
refs以官方的说明,它是一个紧急的出口,官方建议只用来获取值,而不要改变到这参照到的DOM元素的值或属性。而且不要过度使用,用多了相当于回到像jQuery之类的DOM查询库的老路,而且会脱离React的管控范围。
更多信息请看官方的Refs and the DOM。
10 回答11.2k 阅读
5 回答4.9k 阅读✓ 已解决
4 回答3.2k 阅读✓ 已解决
2 回答2.8k 阅读✓ 已解决
3 回答2.4k 阅读✓ 已解决
3 回答2.2k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
把这个DOM节点赋给input变量,可以通过input变量来访问到该节点,比如获取输入值等。