import * as React from 'react' ; import { EventsAppProps } from '../../../types' ; export type EventsAppState = { keyboardEvents : React . KeyboardEvent [ ] ; mouseEvents : React . MouseEvent [ ] ; } ; const keyboardEventComp = ( event , idx ) => { const normalizedKey = event . key === 'OS' ? 'Meta' : event . key ; return ( < div key = { idx } className = 'keyboard-event-data' > < span className = 'event-key' style = { { whiteSpace : 'pre' } } > { normalizedKey } < /span> < span className = 'event-keycode' > { event . keyCode } < /span> < /div>); } ; const mouseEventComp = ( event , idx ) => { return ( < div key = { idx } className = 'mouse-event-data' > < span className = 'event-type' > { event . type } < /span> < /div>); } ; export class EventsApp extends React . Component < EventsAppProps , EventsAppState > { state = { keyboardEvents : [ ] , mouseEvents : [ ] } ; onKeyboardEvent = ( e ) => { const { keyboardEvents } = this . state ; const eventObj = { ... e , key : e . key , keyCode : e . keyCode } ; this . setState ( { keyboardEvents : [ ... keyboardEvents , eventObj ] } ) ; } ; onMouseEvent = ( e ) => { const { mouseEvents } = this . state ; const eventObj = { ... e , type : e . type , clientX : e . clientX , clientY : e . clientY } ; this . setState ( { mouseEvents : [ ... mouseEvents , eventObj ] } ) ; } ; render ( ) { const { state } = this ; return ( < div className = 'events-container' > < div className = 'mouse-events' > < button style = { { height : 100 , width : 100 } } onMouseDown = { this . onMouseEvent } onMouseUp = { this . onMouseEvent } onMouseMove = { this . onMouseEvent } onMouseLeave = { this . onMouseEvent } > Mouse Events < /button> < div > { state . mouseEvents . map ( mouseEventComp ) } < /div> < /div> < div className = 'keyboard-events' > < input onKeyDown = { this . onKeyboardEvent } value = '' / > < div > { state . keyboardEvents . map ( keyboardEventComp ) } < /div> < /div> < /div>); } }