جافا سكريبت - كيف يمكنني إعداد معالج 'onKeyPress' على عنصر <canvas> في React؟

أنا ملم بـ React ونظام الأحداث الخاص به، ولكن لا يبدو أنني قادر على جعل حدث onKeyPress يعمل على عنصر <canvas>. في الواقع، لا أستطيع جعله يعمل على عنصر <div> أيضًا.

إليك الكود ذي الصلة

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

يعمل بشكل جيد إذا قمت بتغيير <canvas> ليكون <input>، لكنه لا يعمل مع <div>. هل هذا يعني أن React ببساطة لا يدعم أحداث keyPress على عناصر canvas؟ ما الذي أغفله؟

الإجابة رقم 1

فقط قم بتعيين tabIndex للعنصر للحصول على التركيز.

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

الإجابة رقم 2

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

تحقق مما إذا كان بإمكانك إطلاق الحدث أعلاه :)