react中ref的使用方法：1、通过回调函数形式进行使用，代码如“export default class useradd extends component{...}”；2、通过string形式进行使用，代码如“export...”。
本教程操作环境：windows7系统、react16版，该方法适用于所有品牌电脑。
推荐：《javascript基础教程》
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怎么用的详细内容。