javascript - Kuinka asetan 'onKeyPress'-käsittelijän <canvas>:lle Reactissa?

Olen perehtynyt Reactiin ja sen tapahtumajärjestelmään, mutta en tunnu saavan onKeyPress-tapahtumaa laukeamaan <canvas>-elementissä. Itse asiassa en saa sitä laukeamaan myöskään <div>-elementissä.

Tässä on asiaankuuluva koodi

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

Se toimii hyvin, jos vaihdan <canvas>:n <input>:ksi, mutta ei toimi <div>:lle. Tarkoittaako tämä, että React ei yksinkertaisesti tue keyPress-tapahtumia canvas-elementeissä? Mitä olen jättämässä huomiotta?

Vastaus #1

Määritä vain tabIndex elementille saadaksesi fokus.

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

Vastaus #2

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

Tarkista, voitko laukaista yllä olevan tapahtuman :)