web-dev-qa-db-ja.com

ReactJSで `onKeyPress`イベントを処理する方法？

onKeyPressイベントをReactJSで機能させるにはどうすればいいですか？enter (keyCode=13)が押されると警告します。

var Test = React.createClass({
    add: function(event){
        if(event.keyCode == 13){
            alert('Adding....');
        }
    },
    render: function(){
        return(
            <div>
                <input type="text" id="one" onKeyPress={this.add} />    
            </div>
        );
    }
});

React.render(<Test />, document.body);
javascriptreactjskeypressonkeypress
152
user544079

私はReact 0.14.7で作業しています。onKeyPressを使用し、event.keyはうまく機能します。

handleKeyPress = (event) => {
  if(event.key == 'Enter'){
    console.log('enter press here! ')
  }
}
render: function(){
     return(
         <div>
           <input type="text" id="one" onKeyPress={this.handleKeyPress} />
        </div>
     );
}
153
Haven
render: function(){
     return(
         <div>
           <input type="text" id="one" onKeyDown={this.add} />
        </div>
     );
}

onKeyDownはkeyCodeイベントを検出します。

46
user544079

私にとってonKeyPressはe.keyCodeは常に0ですが、e.charCodeは正しい値を持ちます。 onKeyDownを使用した場合はe.charCode内の正しいコード。

var Title = React.createClass({
    handleTest: function(e) {
      if (e.charCode == 13) {
        alert('Enter... (KeyPress, use charCode)');
      }
      if (e.keyCode == 13) {
        alert('Enter... (KeyDown, use keyCode)');
      }
    },
    render: function() {
      return(
        <div>
          <textarea onKeyPress={this.handleTest} />
        </div>
      );
    }
  });

リアクトキーボードイベント https://facebook.github.io/react/docs/events.html#keyboard-events

40
blackchestnut
var Test = React.createClass({
     add: function(event){
         if(event.key === 'Enter'){
            alert('Adding....');
         }
     },
     render: function(){
        return(
           <div>
            <input type="text" id="one" onKeyPress={(event) => this.add(event)}/>    
          </div>
        );
     }
});
9
Kiran Chaudhari

Reactはあなたが考えるかもしれない種類の出来事をあなたに渡していません。それどころか、 合成イベントを渡しています 。

簡単なテストでは、event.keyCode == 0は常に真です。欲しいのはevent.charCodeです

9
Ben

動的入力内で、動的パラメータを関数に渡したい場合は、

<Input 
  onKeyPress={(event) => {
    if (event.key === "Enter") {
      this.doSearch(data.searchParam)
    }
  }}
  placeholder={data.placeholderText} />
/>

これが誰かに役立つことを願っています。 :)

5
waz

パーティーに遅れたが、私はこれをTypeScriptでやろうとしていたし、これを思い付いた：

<div onKeyPress={(e: KeyboardEvent<HTMLDivElement>) => console.log(e.key)}

これはスクリーンに押された正確なキーを印刷します。したがって、divにフォーカスがあるときにすべての "a"プレスに応答したい場合は、e.keyを "a"と比較します - 文字通りif（e.key === "a"）。

5
vbullinger

キープレスイベントに関しては、いくつかの課題があります。 Jan Wolterのキーイベントに関する記事 は少し古くなっていますが、キーイベントの検出が難しい場合がある理由はよく説明されています。

注意すべき点がいくつかあります。

  1. keyCode、which、charCodeは、キー入力やキー入力とは異なるキーの値/意味を持ちます。これらはすべて非推奨ですが、主要なブラウザではサポートされています。
  2. オペレーティングシステム、物理的なキーボード、ブラウザ（バージョン）はすべてキーコード/値に影響を与える可能性があります。
  3. keyとcodeは最近の標準です。しかし、これらは執筆時点ではブラウザによって十分にサポートされていません。

反応アプリでキーボードイベントに取り組むために、 react-keyboard-event-handler を実装しました。ご覧ください。

3
David Lin

Keypressイベントは非推奨です。代わりにKeydownイベントを使用する必要があります。

https://developer.mozilla.org/en-US/docs/Web/API/Document/keypress_event

handleKeyDown(event) {
    if(event.keyCode === 13) { 
        console.log('Enter key pressed')
  }
}

render() { 
    return <input type="text" onKeyDown={this.handleKeyDown} /> 
}
0
UserNeD