扫码关注官方订阅号
业精于勤，荒于嬉;行成于思，毁于随。
把这个DOM节点赋给input变量，可以通过input变量来访问到该节点，比如获取输入值等。
当渲染完成时，会执行ref函数，并且将这个input实际节点传给函数的参数node，而在这个函数中，this指向的组件，所以我们只要在组件渲染后，在组件内使用this调用这个实际节点
这是赋一个回调函数作为ref的值。在此组件挂载(mount)后，React将会自动调用ref中赋给的回调函数，回调函数中可以得到一个传参，即是真实DOM元素的参照。所以这个语法，可以取得组件挂载的真实DOM元素的参照，称为"背后支持实例(Backing Instance)"，利用这个参照可以对真实的DOM元素作获取值、更动属性值等等之类的事。这就像在纯JS中用getElementById得到某个DOM元素的参照一样。
getElementById
认真地来说，这种ref的取值语法已经过多次的修改。为了防止在组件未在网页上挂载完成时，就想要取ref值的情况，所以这语法才会设计成这样子。之前是直接赋一个字符串给ref的，或是用其它的方法来取这ref的参照值，大部份都已经弃用，或是已经接近准备弃用的情况。
refs以官方的说明，它是一个紧急的出口，官方建议只用来获取值，而不要改变到这参照到的DOM元素的值或属性。而且不要过度使用，用多了相当于回到像jQuery之类的DOM查询库的老路，而且会脱离React的管控范围。
更多信息请看官方的Refs and the DOM。
react官网的近期改款，今后不再使用this.refs....来获取真实的dom，而是通过回调函数来获取了
看下本人的这个问题：https://segmentfault.com/q/10...通过ref实现了输入框自动获取焦点并选中的效果
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
0 
5
377
收藏
把这个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，而是通过回调函数来获取了
看下本人的这个问题：https://segmentfault.com/q/10...
通过ref实现了输入框自动获取焦点并选中的效果