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

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);

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>
     );
}

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

onKeyDownerkennt keyCodeEreignisse.

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 .

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} /> 
}

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

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>
        );
     }
});

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. :) :)

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").

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.

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