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

215

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

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
la source
15
Depuis la v0.11, React normalise les codes clés en chaînes lisibles. Je suggère d'utiliser ceux-ci à la place des keyCodes.
Randy Morris
@RandyMorris react ne normalise pas toujours correctement les codes clés. Pour produire "+", vous obtiendrez la valeur de code clé de 187 avec shiftKey = true, mais la valeur "clé" se résoudra en "Non identifié".
Herr

Réponses:

226

Je travaille avec React 0.14.7, utilise onKeyPresset event.keyfonctionne 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>
     );
}
Havre
la source
18
et vous pouvez le simuler en le testant avec:Simulate.keyPress(ReactDOM.findDOMNode(component.refs.input),{key:"Enter"});
sylvain
2
Qu'entendez-vous par expérimental? Je pensais qu'avec ES6 "functionName (param) => {}" fonctionnerait?
Waltari
4
@Waltari C'est la fonction de flèche ES6 , ce qui signifiefunction handleKeyPress(event){...}
Haven
2
Il lie égalementthis
bhathiya-perera
4
C'est peut-être pédant, mais il convient de noter qu'il serait préférable d'utiliser le ===contrôle d' égalité strict pour event.key == 'Enter'.
Alexander Nied
53
render: function(){
     return(
         <div>
           <input type="text" id="one" onKeyDown={this.add} />
        </div>
     );
}

onKeyDowndétecte les keyCodeévénements.

user544079
la source
11
Habituellement, une chose comme la touche entrée est détectée via onKeyUp - cela permet à l'utilisateur d'arrêter l'interaction s'il le décide. en utilisant keyPress ou keyDown s'exécute immédiatement.
Andreas
53

Pour moi , onKeyPressl' e.keyCodeest toujours 0, mais e.charCodea une valeur correcte. Si utilisé onKeyDownle bon code 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>
      );
    }
  });

Réagissez aux événements du clavier .

noyer noir
la source
9
.. donc si vous êtes intéressé à utiliser les touches fléchées et / ou d'autres touches non alphanumériques, onKeyDown est pour vous car elles ne renverront pas un keyChar mais un keyCode.
oskare
3
Pour ceux qui souhaitent tester React keyEvents eux-mêmes, voici un codeandbox que j'ai créé.
AlienKevin
13

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} /> 
}
UserNeD
la source
1
Il prend également en charge event.key === 'Enter'. Jetez un oeil ici .
marcelocra
10

React ne vous passe pas le genre d'événements auxquels vous pourriez penser. Il s'agit plutôt de passer des événements synthétiques .

Dans un bref test, event.keyCode == 0c'est toujours vrai. Ce que tu veux c'estevent.charCode

Ben
la source
Cela n'affecte cependant pas la question. Il ne change pas keyCode égal à 13 lorsque vous appuyez sur Entrée.
Tequilaman
1
je continue de récupérer des fonctions synthétiques poure.key || e.keyCode || e.charCode
chovy
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
la source
9

Si vous vouliez passer un paramètre dynamique à une fonction, à l'intérieur d'une entrée dynamique:

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

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

waz
la source
7

Tard dans la soirée, mais j'essayais de faire cela en TypeScript et j'ai trouvé ceci:

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

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

vbullinger
la source
Cela ne semble pas fonctionner. stackoverflow.com/questions/43503964/…
sdfsdf
5

Il existe certains défis en ce qui concerne l'événement de pression de touche. L'article de Jan Wolter sur les événements clés est un peu ancien mais explique bien pourquoi la détection des événements clés peut être difficile.

Quelques points à noter:

  1. keyCode, which, charCodeOnt une valeur différente / un sens à partir keyup et keypress keydown. Ils sont tous obsolètes, 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 le code / les valeurs des clés.
  3. keyet codesont la norme récente. Cependant, ils ne sont pas bien pris en charge par les navigateurs au moment de la rédaction.

Pour gérer les événements de clavier dans les applications react, j'ai implémenté react-keyboard-event-handler . Jetez un coup d'oeil s'il vous plait.

David Lin
la source
-3

entrez la description de l'image ici

vous pouvez vérifier cette fonction "pressEnter"

Eng Mahmoud El Torri
la source