• 售前

  • 售后

热门帖子
入门百科

React三大属性之Refs的使用详解

[复制链接]
绘粹凭 显示全部楼层 发表于 2021-10-26 13:04:02 |阅读模式 打印 上一主题 下一主题
目次


  • 类组件
  • 函数组件
  • 面试常问:React中的refs作用是什么?
refs是React中用来取得某个JSX组件或者某个DOM中的一些状态值的时间,用来获取节点的方法。在React官方的解释中,它的适用范围如下:
       
  • 管理核心,文本选择或媒体播放。   
  • 触发强制动画。   
  • 集成第三方 DOM 库。
React文档中再三夸大,请不要过度利用refs,以是当我们可以用dom原生对象办理时,尽量不要利用refs 依照之前的写法,起首是给出类组件和函数组件中refs的写法

类组件


在类中,refs有三种方式,目前最常用的是回调的形式利用,分别举行演示
  1. //直接定义refs,已废弃
  2. class App extends React.PureComponent{
  3.     changeInput = ()=>{
  4.         const {input} = this.refs
  5.     }
  6.     render() {
  7.         return (
  8.             <div>
  9.                 <input type="text" placeholder={"please input your value"} onBlur={this.changeInput} ref={"input"}/>
  10.             </div>
  11.         )
  12.     }
  13. }
  14. //用回调的形式使用
  15. class App extends React.PureComponent{
  16.     changeInput = ()=>{
  17.         console.log(this.inputRef);
  18.     }
  19.     render() {
  20.         return (
  21.             <div>
  22.                 <input type="text" placeholder={"please input your value"} onBlur={this.changeInput} ref={(el)=>{this.inputRef = el}}/>
  23.             </div>
  24.         )
  25.     }
  26. }
  27. //用createRef
  28. class App extends React.PureComponent{
  29.     inputRef = React.createRef()
  30.     changeInput = ()=>{
  31.         console.log(this.inputRef.current);
  32.     }
  33.     render() {
  34.         return (
  35.             <div>
  36.                 <input type="text" placeholder={"please input your value"} onBlur={this.changeInput} ref={this.inputRef}/>
  37.             </div>
  38.         )
  39.     }
  40. }
复制代码
以上就是类组件的三种Ref的写法

函数组件
  1. function App(){
  2.     const inputRef = useRef("")
  3.     return (
  4.         <div>
  5.             <input type="text" placeholder={"please input your value"} ref={inputRef}/>
  6.         </div>
  7.     )
  8. }
复制代码
用一个useRef直接就完成了代码

面试常问:React中的refs作用是什么?


Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄。在类组件中,React将ref属性中第一个参数作为DOM中的句柄。而函数组件中,react用hooks的api useRef也能得到ref(在hooks中也经常用useRef的特性即不随着组件刷新而刷新存储的数据从而写一些稳定的量)
以上就是React三大属性之Refs的利用详解的具体内容,更多关于React三大属性之Refs的资料请关注脚本之家别的相干文章!

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作