react中ref的两种使用方法

野性酷女 2021-09-17 15:36 268阅读 0赞

### ref一共有两种使用方式 ###

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

第一种 回调函数形式

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

*  组件渲染后
 *  组件卸载后
 *  ref改变后

import React,{Component} from 'react'
    export default class UserAdd extends Component{
        constructor(){
            super();
        }
        handleSubmit=()=>{
            let name=this.inputName.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={inputName => { this.inputName = inputName }}/>
                    </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>
            )
        }
    
    }