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);
javascript
reactjs
keypress
onkeypress
user544079
la source
la source
Réponses:
Je travaille avec React 0.14.7, utilise
onKeyPress
etevent.key
fonctionne bien.la source
Simulate.keyPress(ReactDOM.findDOMNode(component.refs.input),{key:"Enter"});
function handleKeyPress(event){...}
this
===
contrôle d' égalité strict pourevent.key == 'Enter'
.onKeyDown
détecte leskeyCode
événements.la source
Pour moi ,
onKeyPress
l'e.keyCode
est toujours0
, maise.charCode
a une valeur correcte. Si utiliséonKeyDown
le bon code danse.charCode
.Réagissez aux événements du clavier .
la source
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
la source
event.key === 'Enter'
. Jetez un oeil ici .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 == 0
c'est toujours vrai. Ce que tu veux c'estevent.charCode
la source
e.key || e.keyCode || e.charCode
la source
Si vous vouliez passer un paramètre dynamique à une fonction, à l'intérieur d'une entrée dynamique:
J'espère que cela aide quelqu'un. :)
la source
Tard dans la soirée, mais j'essayais de faire cela en TypeScript et j'ai trouvé ceci:
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").
la source
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:
keyCode
,which
,charCode
Ont une valeur différente / un sens à partir keyup et keypress keydown. Ils sont tous obsolètes, mais pris en charge par les principaux navigateurs.key
etcode
sont 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.
la source
vous pouvez vérifier cette fonction "pressEnter"
la source