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怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
