Nie reaguje na zdarzenie z kluczem w dół

Question

Próbuję zaimplementować bardzo podstawowe wykrywanie naciśnięć klawiszy i nie mogę w ogóle uruchomić tego działania. Mam gołą składnik, który powinien być podniesienie na razie onKeyDown ale nic nie zostanie wylogowany w konsoli:

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

Problem polega na tym, że ChildComponent nie jest składnikiem, ale fabryką komponentów. Zostanie on zastąpiony wynikiem renderowania elementu utworzonego w tej fabryce.

Włóż ChildComponent do elementu div i dołącz dowolny detektor zdarzeń do elementu div, a nie ChildComponent. Wymień <div> z <span>, jeśli potrzebujesz wbudowanego wyświetlacza.

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

Zobacz go w akcji na codepen

Answer 2

trzeba przypisać tabIndex -attribute za element (element owijania na przykład) aby otrzymywać impulsy. Następnie przechodzą procedurę obsługi keyDown do niej z rekwizytami:

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

w aplikacji mój zespół pracuje nad używamy react-hotkey. Niestety, React nie obsługuje miksów ze składnią ES6, ale jeśli jesteś fajny z jakimś babelem, możesz spróbować.

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

DOM element chce się koncentrować w celu odebrania zdarzenia klawiatury. Jeśli nie chcesz zhakować elementu za pomocą tabIndex lub contentEditable, aby go ustawić, możesz użyć natywnych detektorów zdarzeń DOM na window i zdefiniować inną procedurę obsługi w każdym komponencie obsługującym zdarzenia klawiatury.

Tylko pamiętaj, aby usunąć detektor zdarzeń kiedy że odmontowuje składowe więc wszystkie elementy nie są obsługi przez cały czas:

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

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

Ponadto, nie wydaje się być npm, który zapewnia podobną funkcjonalność jeśli to łatwiejsze: https://www.npmjs.com/package/react-keydown