Jak obsłużyć zdarzenie `onKeyPress` w ReactJS?

215

Jak sprawić, by onKeyPresswydarzenie 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);
użytkownik544079
źródło
15
Od wersji 0.11 React normalizuje kody kluczy w czytelne ciągi. Sugerowałbym użycie tych zamiast keyCodes.
Randy Morris
@RandyMorris reaguje nie zawsze poprawnie normalizuje kody kluczy. Za wygenerowanie „+” otrzymasz wartość klucza 187 z shiftKey = true, jednak wartość „klucz” zostanie zmieniona na „Niezidentyfikowany”.
Herr

Odpowiedzi:

226

Pracuję z React 0.14.7, używam onKeyPressi event.keydziała dobrze.

handleKeyPress = (event) => {
  if(event.key === 'Enter'){
    console.log('enter press here! ')
  }
}
render: function(){
     return(
         <div>
           <input type="text" id="one" onKeyPress={this.handleKeyPress} />
        </div>
     );
}
Przystań
źródło
18
i możesz to symulować w testach za pomocą:Simulate.keyPress(ReactDOM.findDOMNode(component.refs.input),{key:"Enter"});
sylvain,
2
Co rozumiesz przez eksperymentalne? Myślałem, że z ES6 „functionName (param) => {}” będzie działać?
Waltari
4
@Waltari To funkcja strzałki ES6 , co oznaczafunction handleKeyPress(event){...}
Haven
2
Wiąże takżethis
bhathiya-perera
4
Być może jest to pedantyczne, ale warto zauważyć, że lepiej byłoby zastosować ścisłą ===kontrolę równości event.key == 'Enter'.
Alexander Nied
53
render: function(){
     return(
         <div>
           <input type="text" id="one" onKeyDown={this.add} />
        </div>
     );
}

onKeyDownwykrywa keyCodezdarzenia.

użytkownik544079
źródło
11
Zwykle rzeczą jest wykrywanie klawisza Enter za pomocą onKeyUp - pozwala to użytkownikowi przerwać interakcję, jeśli podejmie taką decyzję. using keyPress lub keyDown uruchamia się natychmiast.
Andreas
52

Dla mnie jest zawsze , ale ma poprawną wartość. Jeśli użyto poprawnego kodu w .onKeyPresse.keyCode0e.charCodeonKeyDowne.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>
      );
    }
  });

Reakcja na zdarzenia z klawiatury .

kasztanowiec
źródło
9
.. więc jeśli jesteś zainteresowany użyciem klawiszy strzałek i / lub innych niealfanumerycznych klawiszy, onKeyDown jest dla Ciebie, ponieważ nie zwrócą keyChar, ale keyCode.
oskare
3
Dla zainteresowanych wypróbowaniem React keyEvent, oto kod i skrzynka, które utworzyłem.
AlienKevin
13

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

handleKeyDown(event) {
    if(event.keyCode === 13) { 
        console.log('Enter key pressed')
  }
}

render() { 
    return <input type="text" onKeyDown={this.handleKeyDown} /> 
}
UserNeD
źródło
1
Obsługuje również event.key === 'Enter'. Spójrz tutaj .
marcelocra
10

React nie przekazuje ci wydarzeń, o których możesz pomyśleć. Raczej mija wydarzenia syntetyczne .

W krótkim teście event.keyCode == 0zawsze jest prawdą. To czego chceszevent.charCode

Ben
źródło
Nie wpływa to jednak na pytanie. Nie zmienia keyCode równy 13 po naciśnięciu Enter.
Tequilaman
1
wciąż otrzymuję syntetyczne funkcje z powroteme.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
źródło
9

Jeśli chcesz przekazać parametr dynamiczny do funkcji, wewnątrz wejścia dynamicznego:

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

Mam nadzieję, że to komuś pomoże. :)

waz
źródło
7

Późno na imprezę, ale starałem się to zrobić w TypeScript i wymyśliłem:

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

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

vbullinger
źródło
5

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:

  1. keyCode, which, charCodeMają inną wartość / znaczenie w naciśnięciem klawisza z keyup i keydown. Wszystkie są przestarzałe, ale obsługiwane w głównych przeglądarkach.
  2. System operacyjny, klawiatury fizyczne, przeglądarki (wersje) mogą mieć wpływ na kod / wartości klucza.
  3. keyi codesą 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ć.

David Lin
źródło
-3

wprowadź opis zdjęcia tutaj

możesz sprawdzić tę funkcję „pressEnter”

Eng Mahmoud El Torri
źródło