Rumah > Artikel > hujung hadapan web > react中ref怎么用
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!