Come gestire l'evento `onKeyPress` in ReactJS?

Come posso far funzionare l' onKeyPressevento in ReactJS? Dovrebbe avvisare quando enter (keyCode=13)viene premuto.

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

Sto lavorando con React 0.14.7, uso onKeyPresse event.keyfunziona bene.

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

onKeyDownrileva keyCodeeventi.

Per me onKeyPressl' e.keyCodeè sempre 0, ma e.charCodeha valore corretto. Se utilizzato onKeyDownil codice corretto 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>
      );
    }
  });

React Keyboard Events .

L'evento Keypress è deprecato, è necessario utilizzare invece l'evento 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} /> 
}

React non ti sta trasmettendo il tipo di eventi che potresti pensare. Piuttosto, sta passando eventi sintetici .

In un breve test, event.keyCode == 0è sempre vero. Quello che vuoi èevent.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>
        );
     }
});

Se si desidera passare un parametro dinamico a una funzione, all'interno di un input dinamico:

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

Spero che questo aiuti qualcuno. :)

In ritardo alla festa, ma stavo cercando di farlo in TypeScript e ho pensato a questo:

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

Questo stampa il tasto esatto premuto sullo schermo. Quindi, se vuoi rispondere a tutte le pressioni "a" quando il div è attivo, devi confrontare e.key con "a" - letteralmente if (e.key === "a").

Ci sono alcune sfide quando si tratta dell'evento keypress. L'articolo di Jan Wolter sugli eventi chiave è un po 'vecchio ma spiega bene perché il rilevamento degli eventi chiave può essere difficile.

Alcune cose da notare:

1. keyCode, which, charCodeHanno valore diverso / significato in pressione del tasto da keyup e keydown. Sono tutti deprecati, tuttavia supportati nei principali browser.
2. Sistema operativo, tastiere fisiche, browser (versioni) potrebbero avere un impatto sul codice / sui valori chiave.
3. keye codesono lo standard recente. Tuttavia, non sono ben supportati dai browser al momento della scrittura.

Per affrontare gli eventi da tastiera nelle app di reazione, ho implementato il gestore di eventi di reazione da tastiera . Per favore guarda.

è possibile verificare questa funzione "premere Invio"