ドキュメント全体のキープレス（リアクション）後のコンポーネント関数の呼び出し

Question

ドキュメント全体のキープレスイベントを処理した後、Reactコンポーネント内で関数を呼び出す際に問題が発生しました。方向キーを押すたびに移動機能を呼びたいのですが、機能ではないというエラーが表示されます。

これはバインディングと関係があります。なぜなら、handleKeyPressメソッド内に "this"を印刷すると、Reactコンポーネントではなくドキュメントが得られるからです。この方法で使用できるようにコンポーネントを正しくバインドするにはどうすればよいですか？

componentDidMount() { 
    document.addEventListener("keydown", this.handleKeyPress, false); 
} 

handleKeyPress(e) { 
    // check if pressed key was a directional key... 
    var directionalKey = KEYCODES.indexOf(e.keyCode) == -1 ? false : true; 

    // if so, move! 
    if (directionalKey) { 
    this.move(e.keyCode) 
    } 

    // but wait, this.move is not a function? 
    console.log(this); 
} 

move(direction) { 
    // do something... 
} 

ありがとうございます！

Answer 1

メソッドが正しいthisで呼び出されていることを確認してください。いくつかのオプションがあります。

矢印機能を使用します。

componentDidMount() { 
    document.addEventListener("keydown", e => this.handleKeyPress(e), false); 
} 

またはこれを手動でバインドします。

componentDidMount() { 
    document.addEventListener("keydown", this.handleKeyPress.bind(this), false); 
} 

それとも、バベルとstage-2以上を使用している場合は、クラスのプロパティは、構文を矢印使用することができます。

handleKeyPress = (e) => { 
    // ... 
} 

componentDidMount() { 
    document.addEventListener("keydown", this.handleKeyPress, false); 
}