Reactでrefを使用する方法

react で ref を使用する方法: 1. 「export default class UserAdd extends Component{...}」などのコードを使用してコールバック関数の形式で使用します; 2. 文字列形式で使用します。 「export ...」などのコードを使用します。

#このチュートリアルの動作環境: Windows7 システム、react16 バージョン この方法は、すべてのブランドのコンピューターに適しています。

推奨: "

Javascript 基本チュートリアル"

react で ref を使用する 2 つの方法

ref には 2 種類あります使用方法

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

• 文字列形式

最初のタイプ コールバック関数form

コールバック関数には 3 つのトリガー メソッドがあります。form

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

コンポーネントのアンロード後

参照の変更後

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>
        )
    }
 
}

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(
            <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 中国語 Web サイトの他の関連記事を参照してください。