react中ref怎么用-js教程-PHP中文网

react中ref怎么用

藏色散人

发布： 2020-11-26 10:31:48

原创

2558人浏览过

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

react中ref怎么用

本教程操作环境：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中文网其它相关文章！