Tome el siguiente componente React (17.0.2):
const Grid = () => { return ( <div id='grid' style={{display: 'flex', flexDirection: 'column'}}> <div style={{display: 'flex'}}> <div> 1 </div> <div> 2 </div> <div> 3 </div> </div> <div style={{display: 'flex'}}> <div> 4 </div> <div> 5 </div> <div> 6 </div> </div> <div style={{display: 'flex'}}> <div> 7 </div> <div> 8 </div> <div> 9 </div> </div> </div> ) }Es solo una cuadrícula simple con algunos datos simples. Es bastante fácil agregarle detectores de eventos que le permitan desplazarse con las teclas de flecha si las toca. ¿Cómo hago para que al mantener presionadas las teclas de flecha se desplace continuamente?
Lo principal que he intentado hasta ahora es:
Esto tiene el problema de que es realmente inconsistente: ¡el intervalo solo se borra a veces y, a veces, el desplazamiento continúa!
¡Puntos de bonificación si puede hacer que la cuadrícula sea más grande y luego mantener el elemento que se desplaza en la ventana gráfica!
Simplemente simple con esto: use ref para manejar el enfoque del elemento actual y el usuario presione la tecla hacia abajo
const myRef = useRef(); useEffect(() => { const node = myRef.current; node.addEventListener('keydown',(e) => { const active = document.activeElement; if(e.keyCode === 40 && active.nextSibling) { active.nextSibling.focus(); } if(e.keyCode === 38 && active.previousSibling) { active.previousSibling.focus(); } }); } , []) <div id='grid' ref={myRef} style={{display: 'flex', flexDirection: 'column'}}>