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

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

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

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

onKeyDowndétecte les keyCodeévénements.

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 .

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

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

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

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

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

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.

vous pouvez vérifier cette fonction "pressEnter"