Wie gehe ich mit dem Ereignis "onKeyPress" in ReactJS um?

214

Wie kann ich die onKeyPressVeranstaltung in ReactJS zum Laufen bringen? Es sollte alarmieren, wenn enter (keyCode=13)gedrückt wird.

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);
user544079
quelle
15
Seit v0.11 normalisiert React Schlüsselcodes in lesbare Zeichenfolgen. Ich würde vorschlagen, diese anstelle der keyCodes zu verwenden.
Randy Morris
@RandyMorris Reaktion normalisiert Schlüsselcodes nicht immer korrekt. Für die Erzeugung von "+" erhalten Sie den Schlüsselcodewert 187 mit shiftKey = true. Der Wert "key" wird jedoch in "Unidentified" aufgelöst.
Herr

Antworten:

225

Ich arbeite mit React 0.14.7, benutze onKeyPressund event.keyarbeite gut.

handleKeyPress = (event) => {
  if(event.key === 'Enter'){
    console.log('enter press here! ')
  }
}
render: function(){
     return(
         <div>
           <input type="text" id="one" onKeyPress={this.handleKeyPress} />
        </div>
     );
}
Oase
quelle
17
und Sie können es in Tests simulieren mit:Simulate.keyPress(ReactDOM.findDOMNode(component.refs.input),{key:"Enter"});
Sylvain
2
Was meinst du mit experimentell? Ich dachte mit ES6 "functionName (param) => {}" würde funktionieren?
Waltari
4
@Waltari Es ist ES6 Pfeil Funktion , die Mittelfunction handleKeyPress(event){...}
Haven
2
Es bindet auchthis
Bhathiya-Perera
4
Vielleicht ist es pedantisch, aber es ist erwähnenswert, dass es vorzuziehen wäre, die strenge Gleichstellungsprüfung ===für zu verwenden event.key == 'Enter'.
Alexander Nied
52
render: function(){
     return(
         <div>
           <input type="text" id="one" onKeyDown={this.add} />
        </div>
     );
}

onKeyDownerkennt keyCodeEreignisse.

user544079
quelle
11
Normalerweise wird etwas wie die Eingabetaste über onKeyUp erkannt - dies ermöglicht es dem Benutzer, die Interaktion zu stoppen, wenn er dies wünscht. Die Verwendung von keyPress oder keyDown wird sofort ausgeführt.
Andreas
51

Für mich onKeyPressdas e.keyCodeimmer 0, aber e.charCoderichtigen Wert hat. Bei Verwendung onKeyDownder richtige Code in 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>
      );
    }
  });

Reagieren Sie auf Tastaturereignisse .

Schwarzkastanie
quelle
9
..so wenn Sie an der Verwendung der Pfeiltasten und / oder anderer nicht alphanumerischer Tasten interessiert sind, ist onKeyDown genau das Richtige für Sie, da sie kein keyChar, sondern einen keyCode zurückgeben.
oskare
3
Für diejenigen, die React keyEvents selbst ausprobieren möchten, ist hier eine von mir erstellte Codesandbox .
AlienKevin
13

Das Tastendruckereignis ist veraltet. Sie sollten stattdessen das Keydown-Ereignis verwenden.

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} /> 
}
UserNeD
quelle
Es unterstützt auch event.key === 'Enter'. Schauen Sie hier .
Marcelocra
10

React übergibt Ihnen nicht die Art von Ereignissen, die Sie vielleicht denken. Es geht vielmehr um synthetische Ereignisse .

In einem kurzen Test event.keyCode == 0ist das immer wahr. Was du willst istevent.charCode

Ben
quelle
Dies hat jedoch keinen Einfluss auf die Frage. Beim Drücken der Eingabetaste wird der keyCode nicht auf 13 geändert.
Tequilaman
1
Ich e.key || e.keyCode || e.charCode
bekomme
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>
        );
     }
});
Kiran Chaudhari
quelle
9

Wenn Sie einen dynamischen Parameter innerhalb einer dynamischen Eingabe an eine Funktion übergeben möchten:

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

Hoffe das hilft jemandem. :) :)

waz
quelle
7

Spät zur Party, aber ich habe versucht, dies in TypeScript zu erledigen und habe mir Folgendes ausgedacht:

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

Dadurch wird die genaue Taste gedruckt, die auf dem Bildschirm gedrückt wurde. Wenn Sie also auf alle "a" -Drücke reagieren möchten, während das div scharfgestellt ist, vergleichen Sie e.key mit "a" - wörtlich wenn (e.key === "a").

vbullinger
quelle
Das scheint nicht zu funktionieren. stackoverflow.com/questions/43503964/…
sdfsdf
5

Es gibt einige Herausforderungen, wenn es um Tastendruckereignisse geht. Jan Wolters Artikel über Schlüsselereignisse ist etwas alt, erklärt aber gut, warum die Erkennung von Schlüsselereignissen schwierig sein kann.

Ein paar Dinge zu beachten:

  1. keyCode, which, charCodeHaben unterschiedlichen Wert / Bedeutung in keypress von keyup und keydown. Sie sind alle veraltet, werden jedoch in den wichtigsten Browsern unterstützt.
  2. Betriebssystem, physische Tastaturen und Browser (Versionen) können sich auf den Schlüsselcode / die Schlüsselwerte auswirken.
  3. keyund codesind der aktuelle Standard. Sie werden jedoch zum Zeitpunkt des Schreibens von Browsern nicht gut unterstützt.

Um Tastaturereignisse in React-Apps anzugehen, habe ich den React-Keyboard-Event-Handler implementiert . Guck dir das mal bitte an.

David Lin
quelle
-3

Geben Sie hier die Bildbeschreibung ein

Sie können diese Funktion "Drücken Sie die Eingabetaste" überprüfen.

Eng Mahmoud El Torri
quelle