KeyPress olay yönetimi reaJS

Question

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

KeyPress etkinliğini React JS'de nasıl çalıştırabilirim. enter (keyCode=13) basıldığında uyarı yapmalıdır.

Answer 1

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

onKeyDownkeyCode olayları algılar.

Answer 2

Tepki, aklınıza gelebilecek türden olayları aktarmıyor. Aksine, synthetic events geçiyor.

Kısa bir testte, event.keyCode == 0 her zaman doğrudur. İstediğin benim onKeyPress için event.charCode

Answer 3

e.keyCode daima 0 olduğunu, ancak e.charCode doğru değeri vardır. onKeyDown kullanılıyorsa, e.charCode numaralı telefondan doğru kodu kullanın.

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

ile çalışıyorum https://facebook.github.io/react/docs/events.html#keyboard-events

Answer 4

Klavye Olaylar, 0.14.7 tepki de onKeyPress ve event.key eserlerini kullanmak yanıt verin.

handleKeyPress = (event) => { 
    if(event.key == 'Enter'){ 
    console.log('enter press here! ') 
    } 
} 
render: function(){ 
    return(
     <div> 
      <input type="text" id="one" onKeyPress={this.handleKeyPress} /> 
     </div> 
    ); 
} 

Answer 5

Geç partiye

ama çalışıyordum Bu tutanak yapılır ve bu geldi almak için:

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

Bu ekrana basıldığında tam anahtarını yazdırır. Yani, div odakta iken tüm "a" basışlarına cevap vermek istiyorsanız, e.key'i "a" ile karşılaştırırsınız - tam anlamıyla (e.key === "a").

Answer 6

dinamik girişi :: Bu kimse yardımcı

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

Hope içinde bir işleve aracılığıyla dinamik param geçmek isteseydim. :)