CODEWITHSUNDEEP
javascripteventsreactjs
monte
monte

Reputation: 98

How do I set up an 'onKeyPress' handler on a <canvas> in react?

I am familiar with React and its event system, but I can't seem to get the onKeyPress event to fire on a <canvas> element. In fact, I can't get it to fire on a <div> either.

Here is the relevant code

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

It works fine if I change the <canvas> to be an <input>, but does not work for <div>. Does this mean that react simply does not support keyPress events on canvas elements? What am I overlooking?

Upvotes: 6

Views: 2593

Answers (2)

Season
Season

Reputation: 4366

Just assign tabIndex to the element for getting the focus.

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

Upvotes: 7

AkshayJ
AkshayJ

Reputation: 769

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

Check if you can fire the above event :)

Upvotes: 0

Related Questions