web-dev-qa-db-fra.com

Comment gérer l'événement `onKeyPress` dans ReactJS?

Comment puis-je faire en sorte que l'événement onKeyPress fonctionne dans ReactJS? Il devrait alerter lorsque enter (keyCode=13) est appuyé.

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
169
user544079

Je travaille avec React 0.14.7, utilisez onKeyPress et event.key fonctionne bien.

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

onKeyDown détecte les événements keyCode.

47
user544079

Pour moi onKeyPress le e.keyCode est toujours 0, mais e.charCode a la valeur correcte. Si utilisé onKeyDown le code correct dans 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>
      );
    }
  });

événements de clavier de réaction .

41
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>
        );
     }
});
10
Kiran Chaudhari

Réagir ne vous transmet pas le genre d’événements auxquels vous pourriez penser. Au contraire, il passe événements synthétiques .

Dans un bref test, event.keyCode == 0 est toujours vrai. Ce que vous voulez, c'est event.charCode

9
Ben

Si vous voulez transmettre un paramètre dynamique à une fonction, dans une entrée dynamique:

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

J'espère que ça aide quelqu'un. :)

7
waz

En retard à la fête, mais j'essayais de le faire dans TypeScript et je l'ai trouvé:

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

Ceci imprime la touche exacte appuyée à l'écran. Donc, si vous voulez répondre à toutes les pressions "a" lorsque la div est au point, comparez e.key à "a" - littéralement si (e.key === "a").

7
vbullinger

Il y a quelques défis en ce qui concerne l'événement de frappe au clavier. L'article de Jan Wolter sur les événements clés est un peu vieux mais explique bien pourquoi la détection d'événements clés peut être difficile.

Quelques points à noter:

  1. keyCode, which, charCode ont une valeur/signification différente lorsque vous appuyez sur la touche depuis la touche haut ou le bas. Ils sont tous déconseillés, mais pris en charge par les principaux navigateurs.
  2. Le système d'exploitation, les claviers physiques, les navigateurs (versions) pourraient tous avoir un impact sur les codes/valeurs de clés.
  3. key et code sont la norme récente. Cependant, ils ne sont pas bien supportés par les navigateurs au moment de la rédaction.

Pour aborder les événements de clavier dans les applications de réaction, j'ai mis en œuvre react-keyboard-event-handler . Jetez un coup d'oeil s'il vous plait.

3
David Lin

L'événement Keypress est obsolète. Vous devez plutôt utiliser l'événement 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