javascript - Kako postaviti 'onKeyPress' handler na <canvas> u Reactu?

Upoznat sam s Reactom i njegovim sustavom događaja, ali čini se da ne mogu pokrenuti onKeyPress događaj na <canvas> elementu. Zapravo, ne mogu ga pokrenuti niti na <div> elementu.

Evo relevantnog koda

class MyComponent extends React.Component {
    render() {
        return (
            <canvas onKeyPress={() => console.log('fired')} />
        )
    }
}

Radi dobro ako promijenim <canvas> u <input>, ali ne radi za <div>. Znači li to da React jednostavno ne podržava keyPress događaje na canvas elementima? Što propuštam?

Odgovor #1

Jednostavno dodijelite tabIndex elementu kako bi dobio fokus.

<canvas tabIndex="0" onKeyPress={ () => console.log( 'fired' ) } />

Odgovor #2

canvas.addEventListener('keydown', function(event) {
    alert('keydown');
        }, false);

Provjeri možeš li pokrenuti gornji događaj :)