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中文網其他相關文章!