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)
    }

效果展示

相关推荐
心.c12 分钟前
react当中的this指向
前端·javascript·react.js
Java水解20 分钟前
Web API基础
前端
闲鱼不闲21 分钟前
实现iframe重定向通知父级页面跳转
前端
咸鱼青菜好好味21 分钟前
node的项目实战相关-2-前台接口
前端
春秋半夏23 分钟前
音乐播放、歌词滚动
前端·css
Sioncovy26 分钟前
Zustand 源码阅读计划(3)- JS 篇 - Middlewares 中间件逻辑
前端·javascript
bo5210028 分钟前
垃圾回收机制详解
前端
多啦C梦a29 分钟前
🪄 这么优雅?`useContext` + 自定义 Hooks:优雅管理全局状态,从主题切换说起
前端·javascript·react.js
患得患失94940 分钟前
【前端】【Echarts】ECharts 词云图(WordCloud)教学详解
前端·javascript·echarts
三年三月44 分钟前
021-顶点法线与反射原理
javascript·three.js