不使用ref

最新推荐文章于 2022-01-20 15:18:46 发布
最新推荐文章于 2022-01-20 15:18:46 发布
阅读量170 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/xyn0909/p/9190276.html
版权

为什么 尽量避免ref？

使用ref原因：react功能来访问DOM元素，这种功能的需求往往来自于提交表单的操作，再提交表单的时候，需要读取当前表单中input元素的值

 

而react的产生就是为了避免直接操作DOM元素，原因是直接访问DOM元素很容易产生失控的情况

 

解决办法：可以利用组件状态来同步记录DOM元素的值，这种方法可以控制住组件不使用ref。

转载于:https://www.cnblogs.com/xyn0909/p/9190276.html

weixin_30565199
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React之不要过度使用ref
Hiroshi's
09-13 414
当要获取的数据和事件源是同一个标签的时候，可以省略ref
什么时候用ref，什么时候不用ref
richest_qi的博客
05-07 371
文章目录用ref不用ref 用ref “打在我身，疼在她心”时，用ref。比如，点击事件绑定在某个标签上，事件处理函数中却要访问另一个完全不相关的元素的真实DOM。 本例中，click事件绑定在button标签上，事件处理函数handleClick中却要访问h2元素中的内容。 <template> <div> <h2 ref="title">{{msg}}</h2> <button @click="handleClick">点击
A string ref, “title“, has been found within a strict mode tree. String refs are a source of po
不确定因素的博客
01-20 1223
react严格模式报错:Warning: A string ref, "title", has been found within a strict mode tree. String refs are a source of potential bugs and should be avoided. We recommend using useRef() or createRef() instead. Learn more about using refs safely here:
uniapp中不能使用$ref
EEstefan的博客
05-02 3756
unipp中不能使用$ref 有一个需求，v-for遍历出来的元素要加一个唯一的标识。当点击其中一个时，改变被点击元素的样式。 我打算用ref加上 :key 绑定的值来做标识，但是当我打印的时候，显示的是undefined。 在这里，我绑定ref 用 内层循环 :key 绑定的 i 和外层循环 :key绑定的 x 一起作为唯一标识。但是并没有用，请看下图。 在这里我打印了 “this.$refs” 并没有找到。 解决方法 使用组件 从打印出来的 “this.refs"中可以看到，里面其实是有东西的 这些
React中Ref 的使用方法详解
10-15
首先，了解何时应该使用Ref。Ref适用于以下场景： 1. **文本选择或媒体播放**：例如，当需要自动聚焦输入框或控制音频/视频播放。 2. **触发动画**：在组件渲染后立即执行动画，如滑动效果。 3. **与第三方DOM库...
.Net Core中使用ref和SpanT提高程序性能的实现代码
01-03
Span也是建立在ref语法基础上的一个复杂的数据类型，在文章的后半部分，我会有一个例子说明如何使用它。 二、ref关键字 不论是ref还是out关键，都是一种比较难以理解和操作的语言特性，如C语言中操作指针一样，这样...
深入浅析Vue 中 ref 的使用
01-19
官网上的说明 ...难道，在 Vue 中就不能手动获取到页面上的 DOM 元素了吗，答案当然是可以手动获取到 DOM 元素的，在 Vue 中我们可以通过使用 ref 实现获取 DOM 元素的功能，当然，这也只是 ref 其中一项的
C#中ref和out参数使用时需要注意的问题
12-22
方法获得的是这些值的一个拷贝，然后使用这些拷贝，当方法运行完毕后，这些拷贝将被丢弃，而原来的值不将受到影响。此外我们还有其他向方法传递参数的形式，引用(ref)和输出(out)。 　有时，我们需要改变原来变量...
C#方法中参数ref和out详解
08-29
使用引用参数时，必须在方法的声明和调用中都使用 ref 修饰符。实参必须是变量，在用作实参前必须被赋值，如果是引用类型变量，可以赋值为一个引用或者 null 值。 例如： ``` static void FuncData(ref float value...
在vue中通过render函数给组件设置ref不生效
Allen-Ye博客
06-08 3480
正常我们的写法是，这样ref不会生效，h是作用在渲染的时候的，而ref是渲染之后才创建的，因此在h函数中使用ref是无效的。 如下 这边打印出来的为undefined render: (h, params) => { return h(expandRow, { ref:‘child’, props: { row: params.row } }) } 我们常见h函数的用法是： render: (h) => { return h(ele) } 在es6中的用法，相当于 (h) => {}
总结ref的用法
weixin_39388536的博客
09-07 3248
ref通常被用来获取DOM元素或组件实例 string类型的ref <input type='text' ref='input' /> ...... console.log(this.$refs.input) // <input type='text' /> $refs 是所有注册过的ref的一个集合 在react中,一般使用function类型的ref,上面的这种string类型的ref将会被废弃,因为它无法直接获取this的指向,并且当使用render回调函数的开发模式，
解决使用装饰器导致ref失效问题
shadowfall的博客
09-08 970
问题 由于react的升级导致了之前的refs的无法使用，使用createRef创建ref的方式进行修改代码，发现ref无法获取到子组件的实例 原因 React在使用装饰器装饰过后ref就失效了，因为该this指向了所用的装饰器，所以在使用ref时会找不到我们所要使用的子组件的current，因此可以模拟fowradRef将ref包装成一个函数向下传递到我们要使用的子组件上再执行。 解决方法 方案一 在工具中添加一个方法: import React from 'react'; export defaul
vue+element 通过ref修改一切硬核样式~
weixin_30906671的博客
07-02 1764
今天的需求是这样的,点击按钮,弹出一个Popover 弹出框 然后老大说,把弹出框往下移移,box-shadow值设的大一些... 然后就查看elenent的Popover文档,并没有方法,而且这个组件修改样式需要 定义popper-class 来为 popper 添加类名 然而发现修改不了样式,查看属性,发现它的样式在外层加载,试了好多办法,都没用,直到我灵光一闪... 你不是牛...
ref实现输入框聚焦
weixin_30731305的博客
11-24 817
关于ref我们是怎么理解的呢？ 我们可以通过React.createRef()创建一个 ref节点，并将其打印出来。 代码如下： import React,{Component} from 'react' import './MyRef.less' class MyRef extends Component{ constructor(props){ super(props) t...
通过绑定类名来实现锚点（不使用ref）
qq_41516823的博客
02-02 117
通过绑定类名来实现锚点（不使用ref） 有个需求是数据全是动态的，还有分类，本来只做展示是很容易的，但是现在数据的分类都是不确定的，还需要在一整个页面右下角做一个小导航的锚点，本来想着可是用ref的绑定实现，可是呢，， vue的语法是通过ref来实现锚点,但是ref都是已经确定的了，不太适用于动态绑定的，于是只有通过绑定类名了 第一 先给右下角的小导航做一个点击事件 @click=“scrollToTag(item)” 事件处理跳转的高度 scrollToTag(tag) { let $el
React Refs用法
Chef_Front的博客
04-25 3472
Refs介绍 Refs提供了一种访问在render方法中创建的DOM节点或者React元素的方法。在典型的数据流中，props是父子组件交互的唯一方式，想要修改子组件，需要使用新的pros重新渲染它。凡事有例外，某些情况下我们需要在典型数据流外，强制修改子代，这个时候可以使用Refs。 下面我将通过例子的方式详细介绍如何设置Refs以及如何访问Refs。 Refs设置 设置Refs...
重点总结--vue使用$refs（函数）传值（不建议使用）
轻风细雨_林木木
07-03 5887
根据：https://segmentfault.com/q/1010000019609355?_ea=14004664
vue.js踩坑之ref引用细节点
热门推荐
草巾冒小子的博客
06-14 1万+
vue.js组件使用中的细节点 vue不建议我们在代码里面操作DOM，但是，在处理一些极其复杂的动画效果，不操作DOM，单单靠vue的数据绑定是无法完成实际需求的效果的。这就需要我们必须操作DOM。如何操作呢？ 通过ref 引用的形式，来操作DOM。下面我们给一个需求：当点击div的时候，div里面的内容被打印出来。 步骤如下： 1.首先起一个引用的名字，比如hello： ref='...
vue3使用ref绑定swiper
最新发布
07-28
在Vue3中使用ref绑定Swiper，你可以按照以下步骤进行操作： 1. 首先，在Vue组件中引入ref函数：import { ref } from 'vue'; 2. 在data选项中创建一个ref对象来存储Swiper实例：data() { return { swiperRef: ref...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值