Estoy tratando de agregar controladores onKeyPress a mi aplicación para que a11y con todos los requisitos. Tengo algunos elementos <div /> interactivos, donde presenta un problema.
Tengo los siguientes controladores de eventos que quiero activar al hacer clic.
const handleViewInfoClick = (event: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>): void => { event.preventDefault(); onProfileClick(); window.open(withConfig(ConfigEnum.PROPERTY_PROFILE_URL, { propertyID: communityId }), '_blank'); };Estoy usando el controlador anterior como:
<div className={classes.community_name} onClick={handleViewInfoClick} onKeyDown={(e) => { if (e.keyCode === 13) { handleViewInfoClick(e); } }} tabIndex={0} role="button" >Da como resultado errores mecanografiados.
Si declaro un event como (event: MouseEvent | KeyboardEvent) , las quejas mecanografiadas de que handleViewInfoClick(e) está obteniendo un tipo incorrecto para un argumento. Si declaro KeyboardEvent<HTMLDivElement> , handleViewInfoClick(e) no genera errores. Sin embargo, las quejas mecanografiadas de que Type 'KeyboardEvent<HTMLDivElement>' is not generic .
¿Cuál es la forma correcta de manejar esto?
Con los controladores de React, debe usar los tipos de eventos de React, no del DOM:
const handleViewInfoClick = (event: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement>): void => {También podrías usar
const handleViewInfoClick = (event: React.SyntheticEvent) => { porque tanto KeyboardEvent como MouseEvent heredan de SyntheticEvent, y lo único que le importa es poder llamar a preventDefault , que tiene SyntheticEvent.