Tepkime anahtar sözcükleri

Question

React uygulamasında tuş ayıklamalarını bulmaya çalışıyorum ve biraz sıkışmış durumdayım.

Bir onKeyPress yerleştirdim ve girişimde bir onKeyDown çalıştı. Bu, tüm harfleri ve Enter tuşunu kullanmamı sağladı.

ben ok tuşlarını ve sadece document.addEventListener yaratmadan Esc tuşuna (' 'keydown', this.onKeypress) işlemek için iyi bir yol bulmak mümkün olmamıştır Ancak

Herkes iyi olsun çözüm?

Answer 1

Olay işleyicinizin yaşam döngüsünü kontrol etmek için focus ve blur olaylarını kullanabilirsiniz.

render() { 
    return (
    <input ref={inputLoaded} type="text" /> 
); 
}, 
inputLoaded(input) { 
    input.addEventListener('focus', this.addEventListeners); 
    input.addEventListener('blur', this.removeEventListeners); 
    this.input = input; 
}, 
componentWillUnmount() { 
    this.input.removeEventListener('focus', this.addEventListeners); 
    this.input.removeEventListener('blur', this.removeEventListeners); 
    window.removeEventListener('keydown', this.handleKey); 
}, 
addEventListeners() { 
    window.addEventListener('keydown', this.handleKey); 
}, 
removeEventListeners() { 
    window.removeEventListeners('keydown', this.handleKey); 
}, 
handleKey(event) { 
    // this only gets called if input is focused. 
    // do something with this key 
} 

dilerseniz, daha sonra, bir state değişkeni kontrol girişi bazı işler yapmadan önce, handleKey yöntemi içinde odak olup olmadığını kontrol etmek focus ve blur olayları kullanabilirsiniz.