Estoy tratando de crear teclas de acceso rápido usando shift + número para enfocarme en un elemento en mi página web. En JavaScript, usa .focus () después de apuntar al elemento, pero al reaccionar estoy confundido. Tengo alrededor de 5 componentes que deben enfocarse en presionar teclas de acceso rápido. Actualmente tengo un código que puede ejecutarse al presionar una tecla y también ejecutar una función, pero luego no sé cómo progresar.
Sé que onFocus solo se ejecutará cuando toque o haga clic en la entrada aquí... pero no sabía cómo hacerlo como un evento sintético condicional. ¿Como en hotkeypress? en Foco: nulo
//app.js function useKey(key, cb) { const callbackRef = useRef(cb); useEffect(() => { callbackRef.current = cb; }); useEffect(() => { function hotkeyPress(e) { if (e.shiftKey && e.keyCode === key) { callbackRef.current(e); } } document.addEventListener('keydown', hotkeyPress); return () => document.removeEventListener('keydown', hotkeyPress); }, [key]); } <ContactInfo searchValue={searchValue} handleSearchChange={handleSearchChange} onSearchCloseClick={onSearchCloseClick} onSearchClick={onSearchClick} useKey={useKey} /> //component to use function handleKeypress() { //? } <input className='contactSearchForm__input' placeholder='Customer name/number' type='text' list='searchList' value={searchValue} onChange={handleSearchChange} onFocus={useKey(49, handleKeypress)} />Así que estaba haciendo un poco demasiado. Esto es todo lo que necesita para apuntar y enfocar diferentes elementos con teclas de acceso rápido en una página usando React. Terminé cambiándolo a teclas f pero también puedes hacer shift + número o cualquier otra tecla.
//app.js function useKey(key, ref) { useEffect(() => { function hotkeyPress(e) { if (e.keyCode === key) { e.preventDefault(); ref.current.focus(); return; } } document.addEventListener('keydown', hotkeyPress); return () => document.removeEventListener('keydown', hotkeyPress); }, [key]); } //component to use const f1Ref = useRef(); useKey(112, f1Ref); <input className='contactSearchForm__input' placeholder='Customer name/number' type='text' list='searchList' value={searchValue} onChange={handleSearchChange} ref={f1Ref} />