Anahtar aşağı olaya tepki vermeme tepkisi

Question

Bazı temel tuşa basma algılamalarını uygulamaya çalışıyorum ve hiç işe yaramayacağım.

class App extends React.Component { 
    constructor(props) { 
    super(props); 
    } 

    handleKeyDown(event) { 
    console.log('handling a key press'); 
    } 

    render() { 
    return (
     <ChildComponent onKeyDown={this.handleKeyDown} /> 
    ); 
    } 
} 

React.render(<App />, document.getElementById('app')); 

Answer 1

sorun ChildComponent bir bileşen ama bir bileşenidir fabrika olmadığıdır. Bu fabrika ile oluşturulan elemanın oluşturulması sonucu değiştirilecektir.

ChildComponent'u bir div içine yerleştirin ve herhangi bir olay dinleyicisini, ChildComponent değil, div'e ekleyin. Satır içi ekrana ihtiyacınız varsa <div>'u <span> ile değiştirin.

let {Component} = React; 

class ChildComponent extends Component { 
    render() { 
    return (<child-component>click me</child-component>); 
    } 
} 

class App extends Component { 
    handleClick(event) { 
    console.log('handling a key press'); 
    } 

    render() { 
    return (<div onClick={this.handleClick}><ChildComponent /></div>); 
    } 
} 

React.render(<App />, document.getElementById('app')); 

DOM öğesi klavye olayı almak için odaklanmış olmak istiyor codepen

Answer 2

Sen elemanı (örneğin sarma elemanı) için tabIndex -attribute atamanız gerekir: Ben onKeyDown olay ama hiçbir şey üzerinde toplayıp gereken konsolda çıkış yapmış olur çıplak bileşeni var bunun için tuşa basmak. Sonra sahne ile kendisine keyDown işleyicisi geçmesi: takımım üzerinde çalışıyor Bir uygulama içinde

import React from 'react'; 
import { render } from 'react-dom'; 

class ChildComponent extends React.Component { 
    constructor(props) { 
    super(props); 
    } 
    render() { 
    return (
     <div tabIndex="0" onKeyDown={this.props.handleKeyDown}>Fooo</div> 
    ); 
    } 
} 

class App extends React.Component { 
    constructor(props) { 
    super(props); 
    } 

    handleKeyDown(event) { 
    console.log('handling a key press'); 
    } 

    render() { 
    return (
     <ChildComponent handleKeyDown={() => this.handleKeyDown()} /> 
    ); 
    } 
} 

render(<App />, document.getElementById('app')); 

Answer 3

, biz react-hotkey kullanıyoruz. Ne yazık ki, React, ES6 sözdizimi ile karmaları desteklemiyor gibi görünüyor, ancak biraz bebekle havalıysanız, bunu deneyebilirsiniz.

let App = React.createClass({ 
    mixins: [hotkey.Mixin('handleKeyDown')], 

    componentDidMount() { 
    hotkey.activate(); 
    }, 

    componentWillUnmount() { 
    hotkey.disable(); 
    }, 

    handleKeyDown(event) { 
    console.log('handling a key press'); 
    }, 

    render() { 
    return (
     <ChildComponent /> 
    ); 
    } 
}); 

React.render(<App />, document.getElementById('app')); 

Answer 4

üzerine görün Yürüt. Öğeyi odaklamak için öğeyi tabIndex veya contentEditable ile kesmek istemiyorsanız, yerel DOM olay dinleyicilerini window'da kullanabilir ve klavye bileşenlerini işleyen her bileşende farklı bir işleyici tanımlayabilirsiniz.

Sadece bu bileşen bağını çözmek böylece tüm bileşenleri her zaman işlememesi olay dinleyicisi kaldırmak emin olun: Ayrıca

componentWillMount: function() { 
    window.addEventListener('keydown', this.handleKeyDown); 
    }, 

    componentWillUnmount: function() { 
    window.removeEventListener('keydown', this.handleKeyDown); 
    }, 

, o kolay olacaksa benzer işlevler sağlayan bir npm var gibi görünmektedir: https://www.npmjs.com/package/react-keydown