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>
)
}
}更多编程相关知识，请访问：编程学习！！
Atas ialah kandungan terperinci react中ref怎么用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
