Estoy tratando de hacer que mi aplicación React.JS en funcionamiento cumpla con los estándares de accesibilidad.
Como parte del ejercicio, agregué controladores onKeyDown donde estoy usando controladores onClick . También envuelvo esos controladores con una función contenedora especial que verifica qué tecla se presiona. El código real está a continuación:
import { KeyboardEvent } from 'react'; enum Keys { TAB = 9, } const handleKeyPress = (cb: () => void) => (e: KeyboardEvent) => { if (e.keyCode !== Keys.TAB) cb(); }; export { handleKeyPress };Lo uso como:
<div className={classes.link_complete} onClick={handleOnClick} onKeyDown={handleKeyPress(() => { handleOnClick(); })} tabIndex={0} role="button" > Esto está funcionando bien. Sin embargo, hay situaciones en las que quiero pasar el evento real como argumento a la función envuelta por la función handleKeyPress . Eso no está funcionando para mí. Lo intenté:
onClick={handleViewInfoClick} onKeyDown={(e) => { console.log('detected keydown'); handleKeyPress(() => { console.log('inside handler'); handleViewInfoClick(e); }); }} Eso no está funcionando. Se detectan eventos de keydown, por lo tanto, veo impreso detected keydown . Sin embargo, el código interno no se invoca.
¿Cuál es la forma correcta de hacer esto?
El problema es que handleKeyPress devuelve una función (lo cual tiene sentido, ya que generalmente usa el valor de retorno para onKeyDown ), pero no lo está llamando en su ejemplo donde está tratando de usar el objeto de evento, solo está llamando handleKeyPress para crear la función y luego no llamar a la función.
Modificaría handleKeyPress para que pase el objeto del evento:
const handleKeyPress = (cb: (e: KeyboardEvent) => void) => (e: KeyboardEvent) => { // ^^^^^^^^^^^^^^^^ if (e.keyCode !== Keys.TAB) cb(e); // ^ };Entonces, el uso sería casi exactamente como su uso original, solo incluiría el controlador:
<div className={classes.link_complete} onClick={handleOnClick} onKeyDown={handleKeyPress((e) => handleViewInfo(e))} tabIndex={0} role="button" >o más sucintamente:
<div className={classes.link_complete} onClick={handleOnClick} onKeyDown={handleKeyPress(handleViewInfo)} tabIndex={0} role="button" >