5 个回答

把这个DOM节点赋给input变量,可以通过input变量来访问到该节点,比如获取输入值等。

当渲染完成时,会执行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

react官网的近期改款,今后不再使用this.refs....来获取真实的dom,而是通过回调函数来获取了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题