Tengo una aplicación como prueba. Cada control deslizante tiene una entrada. Quiero enfocar automáticamente la entrada relacionada cuando el usuario haga clic en el next botón o presione enter .
Traté de lograrlo usando useEffect . Sin embargo, no funciona.
Esta es la función relacionada que incluye la next función de atributo slick y focus de las entradas:
const inputRef = useRef([]); const handleEnter = (event, index) => { if (event.key.toLowerCase() === "enter") { sliderRef.current.slickNext(); // The next slider function of the react-slick package inputRef.current[index].focus() } } Aquí están mis entradas en la función de map :
{data.map((post, index) => ( <Input id={post.question_uuid} name={post.question_uuid} onKeyDown={e => {handleEnter(e, index)}} autoComplete="off ref={el => inputRef.current[index] = el} /> ))}Use useRef para cada entrada y guárdelos en una matriz con el índice que proviene de su mapa; luego, después de cambiar cada diapositiva, puede obtener la referencia de entrada de la matriz en función del índice actual y llamar a array[index].current.focus()