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

效果展示

相关推荐
MrGaoGang21 分钟前
耗时1年,终于我也拥有属于自己的AI工作流
前端·agent·ai编程
没有鸡汤吃不下饭34 分钟前
前端【数据类型】 No.1 Javascript的数据类型与区别
前端·javascript·面试
用户76787977373235 分钟前
后端转全栈之Next.js后端及配置
react.js·next.js
码流之上37 分钟前
【一看就会一写就废 指间算法】设计电子表格 —— 哈希表、字符串处理
javascript·算法
跟橙姐学代码37 分钟前
Python时间处理秘籍:别再让日期时间卡住你的代码了!
前端·python·ipython
汤姆Tom42 分钟前
从零到精通:现代原子化 CSS 工具链完全攻略 | PostCSS × UnoCSS × TailwindCSS 深度实战
前端·css·面试
菜市口的跳脚长颌43 分钟前
Web3基础
前端
RoyLin1 小时前
TypeScript设计模式:代理模式
前端·后端·typescript
IT_陈寒2 小时前
Vue3性能优化实战:这5个技巧让我的应用加载速度提升了70%
前端·人工智能·后端
树上有只程序猿2 小时前
react 实现插槽slot功能
前端