ReactJSで「onKeyPress」イベントを処理する方法


214

onKeyPressReactJSでイベントを機能させるにはどうすればよいですか?を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);

15
v0.11以降、Reactはキーコードを読み取り可能な文字列に正規化します。keyCodesの代わりにそれらを使用することをお勧めします。
Randy Morris

@RandyMorris reactは常にキーコードを正しく正規化するとは限りません。「+」を生成すると、shiftKey = trueでキーコード値187が得られますが、「key」値は「Unidentified」に解決されます。
2015

回答:


225

私はReact 0.14.7で作業していますが、使用onKeyPressevent.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>
     );
}

17
:あなたがしてテストをして、それをsimutateすることができますSimulate.keyPress(ReactDOM.findDOMNode(component.refs.input),{key:"Enter"});
シルヴァン

2
試験運用とはどういう意味ですか?ES6で「functionName(param)=> {}」が機能すると思いましたか?
Waltari

4
@WaltariこれはES6の矢印関数です。つまり、function handleKeyPress(event){...}
Haven

2
それもバインドしますthis
bhathiya-perera 2018

4
多分それは知識が豊富ですが、の厳密な等価===チェックを使用することが望ましいことに注意する価値がありますevent.key == 'Enter'
Alexander Nied

53
render: function(){
     return(
         <div>
           <input type="text" id="one" onKeyDown={this.add} />
        </div>
     );
}

onKeyDownkeyCodeイベントを検出します。


11
通常、エンターキーはonKeyUpを介して検出されます。これにより、ユーザーは必要に応じて対話を停止できます。keyPressまたはkeyDownを使用すると、すぐに実行されます。
Andreas

51

私にとっては常にあるが、正しい値を持っています。で正しいコードを使用した場合。onKeyPresse.keyCode0e.charCodeonKeyDowne.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>
      );
    }
  });

Reactキーボードイベント


9
..so矢印キーやその他の英数字以外のキーの使用に関心がある場合は、onKeyDownを使用すると、keyCharではなくkeyCodeが返されます。
oskare

3
React keyEvents自体を試すことに興味がある人のために、ここに私が作成したコードサンドボックスがあります。
AlienKevin


10

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

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


これは問題には影響しません。Enterキーを押しても、keyCodeは13に変わりません。
テキーラマン

1
私はただ合成機能を取り戻し続けますe.key || e.keyCode || e.charCode
ぎこちない

10
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

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

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

これが誰かを助けることを願っています。:)


7

パーティーには遅れましたが、TypeScriptでこれを実行しようとして、これを思いつきました。

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

これは、画面に押された正確なキーを出力します。したがって、divがフォーカスされているときにすべての "a"プレスに応答する場合は、e.keyを "a"と比較します-文字通りif(e.key === "a")。


これは機能していないようです。stackoverflow.com/questions/43503964/...
sdfsdf

5

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

注意すべきいくつかの点:

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

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


弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.