javascript - Ako nastavím handler 'onKeyPress' na <canvas> v Reacte?

Som oboznámený s Reactom a jeho systémom udalostí, ale zdá sa, že sa mi nedarí spustiť udalosť onKeyPress na prvku <canvas>. V skutočnosti sa mi nedarí ju spustiť ani na prvku <div>.

Tu je príslušný kód

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

Funguje to v poriadku, ak zmením <canvas> na <input>, ale nefunguje to pre <div>. Znamená to, že React jednoducho nepodporuje udalosti keyPress na prvkoch canvas? Čo prehliadam?

Odpoveď č. 1

Jednoducho priraďte tabIndex k elementu, aby ste získali fokus.

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

Odpoveď č. 2

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

Skontrolujte, či môžete spustiť vyššie uvedenú udalosť :)