React基础教程(06):Ref的应用

7、Ref的应用

7.1 给标签设置ref="username"

通过这个获取this.refs.usernameref可以获取到应用的真实dom

html 复制代码
<input style={{width:300}}
       ref={"text"}/>
{/*非常推荐*/}
<Button style={{backgroundColor:'#2ba471', border:"none"}} size={"large"} type={"primary"}
        onClick={ ()=>{
             this.handlerClick() // 非常推荐,传参数
} }>add</Button>

获取input的值

js 复制代码
handlerClick = ()=>{
        console.log("Click4", this.refs.text.value)
    }

实现效果

7.2 给组件设置ref="username"

通过这个获取this.refs.usernameref可以获取到组件对象

7.3 新写法

html 复制代码
 myRef = React.createRef();

<input style={{width:300}}
       ref={this.myRef}/>
{/*非常推荐*/}
<Button style={{backgroundColor:'#2ba471', border:"none"}} size={"large"} type={"primary"}
        onClick={ ()=>{
               this.handlerClick() // 非常推荐,传参数
} }>add</Button>

点击按钮获取input的输入值,主要代码为this.myRef.current.value

js 复制代码
handlerClick = ()=>{
        console.log("Click4", this.myRef.current.value)
    }

效果展示

相关推荐
DanB248 分钟前
html复习
javascript·microsoft·html
汉得数字平台13 分钟前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹19 分钟前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_5 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20155 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
呼啦啦呼啦啦啦啦啦啦6 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
拾光拾趣录8 小时前
括号生成算法
前端·算法
拾光拾趣录9 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子9 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录9 小时前
链表合并:双指针与递归
前端·javascript·算法