2016-03-31 31 views
0

私はReactのキーバインディングを解明しようとしていましたが、私はちょっと立ち往生しています。反応のキーバインド

私はonKeyPressを配置し、入力にonKeyDownも試しました。これにより、すべての文字とEnterキーを処理することができました。

私はちょうどdocument.addEventListenerを作成せずに、矢印キーとEscキーを処理するための良い方法を見つけることができませんでしたが

(「keydownイベント」を、this.onKeypress)

誰もがより良いを持っています溶液?

+0

イベントリスナーを 'document'または' window'に付ける際に特に問題はありますか? –

+0

私はいつも発砲しないように私のイベントを好む。それが入力にちょうど添付されている場合、それは私がそれを集中させたときにのみ発火します。これはすべてのページに表示される検索バーで、イベントがすべてのページで多く発生することを意味します。 – kjonsson

+0

イベントは、イベントリスナーを追加する場所に関係なく、DOM全体を起動します。それらを止める唯一の方法は 'stopPropagation'と' preventDefault'です。 –

答えて

1

イベントハンドラのライフサイクルを制御するのに、focusおよびblurイベントを使用できます。

render() { 
    return (
    <input ref={inputLoaded} type="text" /> 
); 
}, 
inputLoaded(input) { 
    input.addEventListener('focus', this.addEventListeners); 
    input.addEventListener('blur', this.removeEventListeners); 
    this.input = input; 
}, 
componentWillUnmount() { 
    this.input.removeEventListener('focus', this.addEventListeners); 
    this.input.removeEventListener('blur', this.removeEventListeners); 
    window.removeEventListener('keydown', this.handleKey); 
}, 
addEventListeners() { 
    window.addEventListener('keydown', this.handleKey); 
}, 
removeEventListeners() { 
    window.removeEventListeners('keydown', this.handleKey); 
}, 
handleKey(event) { 
    // this only gets called if input is focused. 
    // do something with this key 
} 

また、あなたはその後、state変数を制御入力は、いくつかの作業を行う前に、handleKeyメソッド内でフォーカスがあるかどうかを確認するためにfocusblurイベントを使用することができます。

+0

美しいイモ。ありがとうございました – kjonsson

+0

@doublecheeseburgerこの回答が役に立った場合、それを受け入れられた回答としてマークすることはできますか? –

関連する問題