第一种 回调函数形式

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

回调函数形式一共有三种触发方式

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怎么用的详细内容，更多请关注聚合云库其它相关文章！

ref改变后

组件渲染后

推荐：《javascript基础教程》

ref一共有两种使用方式

回调函数形式（官方推荐）

组件卸载后

react中ref的使用方法：1、通过回调函数形式进行使用，代码如“export default class UserAdd extends Component{...}”；2、通过string形式进行使用，代码如“export...”。

react中ref的两种使用方法

本教程操作环境：Windows7系统、react16版，该方法适用于所有品牌电脑。