Reactでのイベントバインディングの実装は3つの方法を指しています

1. 矢印関数

1. 矢印関数自体はこれをバインドしないという事実を利用します。

2. render() メソッド内のこれは、setState() を取得できるコンポーネントインスタンスです。

クラスAppはReact.Componentを拡張します。
    状態 = {
        カウント: 0
    }
    // イベントハンドラ onIncrement() {
        console.log('イベント処理関数内の this:', this)
        this.setState({
            カウント:この状態の数+1
        })
    }
    // レンダリング render() {
        戻る （
            <div>
                <h1>{this.state.count}</h1>
              //矢印関数内のこれは外部環境を指しています。ここでは: render() メソッド <button onClick={()=>this.onIncrement()}>+1</button>
                {/* <button onClick={this.onIncrement()}>+1</button> */
            </div>
        ）
    }
}

2. Function.proptype.bind()

1. ES5のbindメソッドを使用して、イベントハンドラー内のこれをコンポーネントインスタンスにバインドします。

クラスAppはReact.Componentを拡張します。
    コンストラクタ() {
        素晴らしい（）
        // データ this.state = {
            カウント: 0
        }
        // 最初のメソッド.bind は this ポインタを変更し、関数を返し、関数を実行しません this.onIncrement = this.onIncrement.bind(this)
    }
     // イベントハンドラ onIncrement() {
         console.log('イベント処理関数内の this:', this)
         this.setState({
             カウント:この状態の数+1
         })
     }
    // レンダリング render() {
        戻る （
            <div>
                <h1>{this.state.count}</h1>
                <button onClick={this.onIncrement}>+1</button>
                {/* <button onClick={this.onIncrement()}>+1</button> */
            </div>
        ）
    }
}

3.クラスインスタンスメソッド

1. クラスインスタンスメソッドを矢印関数の形で使う

2. この構文は実験的ですが、babelが存在するため直接使用できます。

クラスAppはReact.Componentを拡張します。
    コンストラクタ() {
        素晴らしい（）
        // データ this.state = {
            カウント: 0
        }
    }
      // イベントハンドラ onIncrement=()=> {
        console.log('イベント処理関数内の this:', this)
        this.setState({
            カウント:この状態の数+1
        })
    }
    // レンダリング render() {
        戻る （
            <div>
                <h1>{this.state.count}</h1>
                <button onClick={this.onIncrement}>+1</button>
                {/* <button onClick={this.onIncrement()}>+1</button> */
            </div>
        ）
    }
}

これで、React で this をイベントバインディングする 3 つのメソッドの実装に関するこの記事は終了です。React で this をイベントバインディングする関連コンテンツの詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: