reactにおけるrefの2つの使用方法

refには2つの使い方があります

コールバック関数形式(公式推奨)

string形式

第1のコールバック関数形式
コールバック関数形式には3つのトリガ方式があります

コンポーネントレンダリング後

コンポーネントアンインストール後

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(
            

                

                      
                    this.name=ref}/>
                
                

                    
                
            
        )
    }

} 

2番目の文字列の形式で使用する場合は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(
            

                

                      
                    
                
                

                    
                
            
        )
    }

}