这篇文章主要介绍了react中ref的使用方法,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
react中ref的使用方法:1、通过回调函数形式进行使用,代码如“export default class UserAdd extends Component{...}”;2、通过string形式进行使用,代码如“export...”。
react中ref的两种使用方法
ref一共有两种使用方式
回调函数形式(官方推荐)
string形式
第一种 回调函数形式
回调函数形式一共有三种触发方式
组件渲染后
组件卸载后
ref改变后
import React,{Component} from 'react' export default class UserAdd extends Component{ constructor(){ super(); } handleSubmit=()=>{ let name=this.name.value; console.log(name); } render(){ return( <form onSubmit={this.handleSubmit}> <div className="from-group"> <label htmlFor="name">姓名</label> <input type="text" className="form-control" ref={ref=>this.name=ref}/> </div> <div className="from-group"> <input type="submit" className="btn btn-primary"/> </div> </form> ) } }
第二种 字符串的形式 使用时用this.refs.string
import React,{Component} from 'react' export default class UserAdd extends Component{ constructor(){ super(); } handleSubmit=()=>{ let name=this.refs.name.value; console.log(name); } render(){ return( <form onSubmit={this.handleSubmit}> <div className="from-group"> <label htmlFor="name">姓名</label> <input type="text" className="form-control" ref="name"/> </div> <div className="from-group"> <input type="submit" className="btn btn-primary"/> </div> </form> ) } }
感谢你能够认真阅读完这篇文章,希望小编分享react中ref的使用方法内容对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,遇到问题就找亿速云,详细的解决方法等着你来学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。