Jak sprawić, by onKeyPress
wydarzenie działało w ReactJS? Powinien ostrzegać po enter (keyCode=13)
naciśnięciu.
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
użytkownik544079
źródło
źródło
Odpowiedzi:
Pracuję z React 0.14.7, używam
onKeyPress
ievent.key
działa dobrze.źródło
Simulate.keyPress(ReactDOM.findDOMNode(component.refs.input),{key:"Enter"});
function handleKeyPress(event){...}
this
===
kontrolę równościevent.key == 'Enter'
.onKeyDown
wykrywakeyCode
zdarzenia.źródło
Dla mnie jest zawsze , ale ma poprawną wartość. Jeśli użyto poprawnego kodu w .
onKeyPress
e.keyCode
0
e.charCode
onKeyDown
e.charCode
Reakcja na zdarzenia z klawiatury .
źródło
Zdarzenie Keypress jest przestarzałe. Zamiast tego należy użyć zdarzenia Keydown.
https://developer.mozilla.org/en-US/docs/Web/API/Document/keypress_event
źródło
event.key === 'Enter'
. Spójrz tutaj .React nie przekazuje ci wydarzeń, o których możesz pomyśleć. Raczej mija wydarzenia syntetyczne .
W krótkim teście
event.keyCode == 0
zawsze jest prawdą. To czego chceszevent.charCode
źródło
e.key || e.keyCode || e.charCode
źródło
Jeśli chcesz przekazać parametr dynamiczny do funkcji, wewnątrz wejścia dynamicznego:
Mam nadzieję, że to komuś pomoże. :)
źródło
Późno na imprezę, ale starałem się to zrobić w TypeScript i wymyśliłem:
Spowoduje to wydrukowanie dokładnie naciśniętego klawisza na ekranie. Więc jeśli chcesz odpowiedzieć na wszystkie naciśnięcia „a”, gdy div jest ostry, porównasz e.key do „a” - dosłownie jeśli (e.key === „a”).
źródło
Istnieją pewne wyzwania, jeśli chodzi o zdarzenie naciśnięcia klawisza. Artykuł Jana Woltera na temat kluczowych wydarzeń jest nieco stary, ale dobrze wyjaśnia, dlaczego wykrycie kluczowych zdarzeń może być trudne.
Kilka rzeczy do zapamiętania:
keyCode
,which
,charCode
Mają inną wartość / znaczenie w naciśnięciem klawisza z keyup i keydown. Wszystkie są przestarzałe, ale obsługiwane w głównych przeglądarkach.key
icode
są najnowszym standardem. Jednak nie są one dobrze obsługiwane przez przeglądarki w momencie pisania.Aby poradzić sobie ze zdarzeniami na klawiaturze w aplikacjach reagujących, zaimplementowałem moduł obsługi zdarzeń reagujących na klawiaturę . Proszę spojrzeć.
źródło
możesz sprawdzić tę funkcję „pressEnter”
źródło