Reactでrefを使用する方法-jsチュートリアル-php.cn

Reactでrefを使用する方法

藏色散人

リリース： 2020-11-30 11:05:01

オリジナル

2323 人が閲覧しました

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

Reactでrefを使用する方法

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

推奨: "

Javascript 基本チュートリアル"

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

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

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

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

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

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

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

参照の変更後

import React,{Component} from &#39;react&#39;
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 &#39;react&#39;
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 サイトの他の関連記事を参照してください。