Hay una lista de elementos de navegación y su elemento de navegación de enfoque debajo de cada tecla TAB presionada, necesito activar el evento onClick del elemento de navegación enfocado al presionar la tecla ENTER.
Esto es lo que hago,
onKeyPress funciona como se esperaba pero no activa onClick
Componente NavBar:
const Navbar = () => { ... return ( <nav> <ul style={{ listStyleType: 'none', padding: 0, margin: 0 }}> {authenticatedRoutes.map((currentItem: any, index: number) => { const isOpen = openedDrawer === currentItem.path return ( <ul key={`ROUTE_LIST_${index}`} style={{ listStyleType: 'none', }} > <li key={`ROUTE_${index}`}> <div onKeyPress={e => { if (e.key === 'Enter') { const event = new MouseEvent('click') e.target.dispatchEvent(event) } }} onClick={() => { history.push(currentItem.path) }} role="link" tabIndex={0} > <div style={{ display: 'flex', alignItems: 'center' }}> <div style={{ ...LEFT_BORDER, backgroundColor: isOpen ? 'transparent' : 'initial', }} /> {linkText} </div> </div> </li> </ul> ) })} </ul> </nav> )No puede activar programáticamente ganchos de eventos nativos en un componente fácilmente en reaccionar.
La mejor solución sería poner el código en su onKeyPress también...
onKeyPress={e => { if (e.key === 'Enter') { history.push(currentItem.path) // I Added this line const event = new MouseEvent('click') e.target.dispatchEvent(event) } }} onClick={() => { history.push(currentItem.path) }}