Wie kann ich die onKeyPress
Veranstaltung in ReactJS zum Laufen bringen? Es sollte alarmieren, wenn enter (keyCode=13)
gedrückt wird.
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
quelle
quelle
Antworten:
Ich arbeite mit React 0.14.7, benutze
onKeyPress
undevent.key
arbeite gut.quelle
Simulate.keyPress(ReactDOM.findDOMNode(component.refs.input),{key:"Enter"});
function handleKeyPress(event){...}
this
===
für zu verwendenevent.key == 'Enter'
.onKeyDown
erkenntkeyCode
Ereignisse.quelle
Für mich
onKeyPress
dase.keyCode
immer0
, abere.charCode
richtigen Wert hat. Bei VerwendungonKeyDown
der richtige Code ine.charCode
.Reagieren Sie auf Tastaturereignisse .
quelle
Das Tastendruckereignis ist veraltet. Sie sollten stattdessen das Keydown-Ereignis verwenden.
https://developer.mozilla.org/en-US/docs/Web/API/Document/keypress_event
quelle
event.key === 'Enter'
. Schauen Sie hier .React übergibt Ihnen nicht die Art von Ereignissen, die Sie vielleicht denken. Es geht vielmehr um synthetische Ereignisse .
In einem kurzen Test
event.keyCode == 0
ist das immer wahr. Was du willst istevent.charCode
quelle
e.key || e.keyCode || e.charCode
quelle
Wenn Sie einen dynamischen Parameter innerhalb einer dynamischen Eingabe an eine Funktion übergeben möchten:
Hoffe das hilft jemandem. :) :)
quelle
Spät zur Party, aber ich habe versucht, dies in TypeScript zu erledigen und habe mir Folgendes ausgedacht:
Dadurch wird die genaue Taste gedruckt, die auf dem Bildschirm gedrückt wurde. Wenn Sie also auf alle "a" -Drücke reagieren möchten, während das div scharfgestellt ist, vergleichen Sie e.key mit "a" - wörtlich wenn (e.key === "a").
quelle
Es gibt einige Herausforderungen, wenn es um Tastendruckereignisse geht. Jan Wolters Artikel über Schlüsselereignisse ist etwas alt, erklärt aber gut, warum die Erkennung von Schlüsselereignissen schwierig sein kann.
Ein paar Dinge zu beachten:
keyCode
,which
,charCode
Haben unterschiedlichen Wert / Bedeutung in keypress von keyup und keydown. Sie sind alle veraltet, werden jedoch in den wichtigsten Browsern unterstützt.key
undcode
sind der aktuelle Standard. Sie werden jedoch zum Zeitpunkt des Schreibens von Browsern nicht gut unterstützt.Um Tastaturereignisse in React-Apps anzugehen, habe ich den React-Keyboard-Event-Handler implementiert . Guck dir das mal bitte an.
quelle
Sie können diese Funktion "Drücken Sie die Eingabetaste" überprüfen.
quelle