组件的三大核心属性之ref

最新推荐文章于 2024-04-18 13:26:44 发布
最新推荐文章于 2024-04-18 13:26:44 发布
阅读量951 收藏
点赞数
分类专栏： react 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lilico_/article/details/122131699
版权

字符串形式的ref

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test"></div>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
    <script type="text/babel">
        class Demo extends React.Component {
            show = () => {
                const {input1} = this.refs
                alert(input1.value)
            }
            show2 = () => {
                const {input2} = this.refs
                alert(input2.value)
            }
            render() {
                return (
                    <div>        
                        <input ref="input1" type="text" placeholder="点击按钮展示数据"/> &nbsp;
                        <button onClick={this.show}>点我展示左侧的数据</button> &nbsp;
                        <input ref="input2" type="text" placeholder="失去焦点展示数据" onBlur={this.show2}/>
                    </div>
                )
            }
        }

        ReactDOM.render(<Demo/>, document.getElementById('test'))
    </script>
</body>
</html>

回调形式的ref

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test"></div>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
    <script type="text/babel">
        class Demo extends React.Component {
            show = () => {
                const {input1} = this
                alert(input1.value)
            }
            show2 = () => {
                const {input2} = this
                alert(input2.value)
            }
            saveInput = (c) => {
                this.input2 = c
            }
            render() {
                return (
                    <div>        
                        <input ref={c => this.input1 = c} type="text" placeholder="点击按钮展示数据"/> &nbsp;
                        <button onClick={this.show}>点我展示左侧的数据</button> &nbsp;
                        <input ref={this.saveInput} type="text" placeholder="失去焦点展示数据" onBlur={this.show2}/>
                    </div>
                )
            }
        }

        ReactDOM.render(<Demo/>, document.getElementById('test'))
    </script>
</body>
</html>

createRef的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test"></div>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
    <script type="text/babel">
        class Demo extends React.Component {
            myRef = React.createRef()
            myRef2 = React.createRef()
            show = () => {
                alert(this.myRef.current.value)
            }
            show2 = () => {
                alert(this.myRef2.current.value)
            }
            render() {
                return (
                    <div>        
                        <input ref={this.myRef} type="text" placeholder="点击按钮展示数据"/> &nbsp;
                        <button onClick={this.show}>点我展示左侧的数据</button> &nbsp;
                        <input ref={this.myRef2} type="text" placeholder="失去焦点展示数据" onBlur={this.show2}/>
                    </div>
                )
            }
        }

        ReactDOM.render(<Demo/>, document.getElementById('test'))
    </script>
</body>
</html>
Lilico_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
plasma-framework:基于KF5和Qt5的等离子库和运行时组件
04-09
等离子框架Plasma工作区的基础库，组件和工具介绍等离子框架提供以下内容： QML组件C ++库：libplasma 脚本引擎QML组件org.kde.plasma.core 有关libplasma功能（例如DataEngine和FrameSvg）的绑定，请参见@ref核心。...
VUE常用方法整理.pdf
03-28
第三章 Vue核心插件之路由模块 18 第一节 路由的跳转原理（哈希模式） 18 1、单页应用的路由模式有两种(哈希模式、history模式) 19 2、 哈希模式原理 19 3、建议的选择：（小D课堂课程） 19 第二节 安装和使用路由 ...
vue3+ts ref获取dom后赋值给HTMLElement类型时报错
weixin_66810621的博客
05-20 1214
因为ref获取时不一定能获取到dom，所以类型为，不能直接赋值给HTMLElement类型，可以使用as来断言，不过要加value，写成refname.value as HTMLElement。
TypeScript——不能将类型“HTMLElement | null”分配给类型“HTMLElement”
FE攻城狮
01-12 9932
针对不能将类型“HTMLElement | null”分配给类型“HTMLElement” 错误,可根据实际情况使用!进行处理或者使用as进行断言; 出错代码如下： 出错原因：可能获取不到container 解决办法： 1. 使用！ 2. 使用 as ...
vue3+ts,父组件通过ref主动获取子组件的数据，涉及到的defineExpose和callback函数讲解_vue 子组件外抛使用callback方式
最新发布
m0_60388117的博客
04-18 313
/传给父组件的方法//用defineExpose把方法暴露出去submitInfo})最近很多小伙伴找我要Linux学习资料，于是我翻箱倒柜，整理了一些优质资源，涵盖视频、电子书、PPT等共享给大家！
Vue3--ref使用（解决ref无法获取dom元素的问题）
热门推荐
韦_恩的博客
05-18 5万+
众所周知在vue2中，ref主要的作用还是便于快速的获取dom元素或组件，因为ref操作相比document.getElementbyId会减少dom操作的节点消耗。 具体关于vue2中ref和$refs的使用，这篇文章写的十分全面： https://www.cnblogs.com/xumqfaith/p/7743387.html 本文还是针对Vue3中ref使用进行说明，重点是模板ref的使用。 1. ref用法1：基本类型封装，使数据响应式 vue3中为了节约资源，并不是全部数据都会进行响.
ts-不能将类型“HTMLElement | null”分配给类型“HTMLElement”。 不能将类型“null”分配给类型“HTMLElement”
m0_71202576的博客
10-21 1478
ts报错
类型“HTMLElement | null”的参数不能赋给类型“HTMLElement”的参数。 不能将类型“null”分配给类型“HTMLElement”
Cupid
09-27 3878
ts报错：类型“HTMLElement | null”的参数不能赋给类型“HTMLElement”的参数。不能将类型“null”分配给类型“HTMLElement”
SpringSecurity 3.0.1.RELEASE.CHM
03-21
5.2. 核心组件 5.2.1. SecurityContextHolder, SecurityContext 和 Authentication对象 5.2.1.1. 获得当前用户的信息 5.2.2. UserDetailsService 5.2.3. GrantedAuthority 5.2.4. 小结 5.3. 验证 5.3.1. 什么...
微软开源 JavaScript 引擎 ChakraCore-易语言
06-14
三、JS脚本支持有哪些优势？ 在流行的脚本语言中，Lua的小巧高性能（性能指LuaJit的性能），Python的功能性一直受开发者青睐。有什么理由使用JS脚本呢？ JS脚本有众多的库支持 JS脚本被用于HTML网页开发，开发者众多...
jpivot学习总结.doc
12-09
controllerURL 否 String 是 链接到 JPivot Controller 的 URL ，该属性在一些复杂环境下比如 Portal 之类就很有用。 4.3. chooseQuery 从前面创建的若干个查询当中选择一个合适的查询（通过查询名称进行选择...
vue3 的组件通信以及ref的使用&v-model
汉堡请不要欺负面条
07-05 9712
vue3 组件通信以及ref的使用
[Vue]ref属性
emmmm.....
10-13 4890
1. ref 属性 1.1 ref 属性的使用方式 1.1.1 标识元素或子组件 1.1.2 获取标识的元素或子组件 1.2 使用 ref 属性标记 html 标签元素 1.3 使用 ref 属性标记子组件 1.4 使用 id 获取元素或子组件
React(8)-组件ref引用
m0_65912225的博客
08-30 1687
目录 1.组件form 受控组件及其特点 非受控组件及其特点 模拟：简单受控组件表单 input两个方向绑定数据： 模拟：复杂(真实)受控组件表单(form里面有多种数据输入) 注意：handleChange1~5 中代码重复率高。 降低代码重复写法降低代码重复写法 模拟：非受控组件 受控组件形式自动时钟 非受控组件形式自动时钟 2.ref-函数类型实现 3.createRef实现 createRef实现自动化时钟 2.业务场景(登录)=>ref模拟for....
【精讲】vue框架 vue组件中的ref、props传值并修改、混合（子组件重复部分利用混合可以减少代码量的重复编写）
m0_59505309的博客
08-04 3048
【精讲】vue框架 vue组件中的ref、props传值并修改、混合（子组件重复部分利用混合可以减少代码量的重复编写）
ref的使用方法 ，组件通信父传子，组件通信子传父，组件分离模块化， v-model 传值的3种方式
qq_63322025的博客
12-28 1293
ref的使用方法 ，组件通信父传子，组件通信子传父，组件分离模块化，v-model 传值的3种方式
Vue获取子组件实例对象 ref 属性
xiaowude_boke的博客
03-24 4401
在 Vue 中推荐使用 ref 属性获取 DOM 元素，这种方式可以提高性能。
ref的引用
qq_72760247的博客
10-20 595
ref的引用
Vue学习之ref属性
qq_40837310的博客
02-14 5651
简介 主要讲解vue中的ref属性。 直接先说结论： 专门被用来给html元素和子组件注册引用信息的（id属性的替代者）。 该属性应用在html元素时，获取的是dom元素对象，如果应用在组件标签上，那么获取的是组件实例对象（vc）。 使用方式： 打标志：<h1 ref=“xxx”>ref</h1> 或者 <School ref=“xxx”></School> 获取：this.$refs.xxx 代码： main.js： //引入vue依赖 impor
ref reactive的区别
08-22
Reactive（响应式）是Vue.js的核心特性之一，它使得数据与视图之间建立了双向绑定关系。当数据发生变化时，视图会自动更新；而当视图发生变化时，数据也会相应地更新。这种响应式的特性使得开发者能够以声明式的方式...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值