Renderizar un array de referencias
Tengo que realizar los siguientes pasos en un array:
- Crear un array de referencias fuera del componente
- Crear un formulario
- Dentro del formulario, hacer un mapeo del array y renderizar un input por cada elemento
- El input (cuando está enfocado) al presionar “enter” pone el siguiente input en foco si existe alguno, de lo contrario envía el formulario
Mi código es el siguiente:
const array = new Array(5).fill(createRef());
const Step1 = () => {
return (
<>
{/*Formulario */}
<form style="{{margin:30}}">
{/*- Dentro del formulario, hacer un mapeo del array y renderizar un input por cada elemento,
- El input (cuando está enfocado) al presionar "enter" pone el siguiente input en foco si existe alguno, de lo contrario envía el formulario */}
{array.map((item, index) => {
return (
<input key="{index}" ref="{item}" type="text" placeholder="{`Input" ${index="" +="" 1}`}="" onkeypress="{(e)" ==""> {
if (e.key === "Enter") {
if (array[index + 1]) {
array[index + 1].current.focus();
} else {
e.preventDefault();
console.log("submit");
}
}
}}
/>
);
})}
<button type="submit">Enviar</button>
</form>
)
}
export default Step1;
El último punto no funciona, ¿cómo puedo cambiar el código para que funcione? Resuelto
El único problema es que no puedo escribir en los inputs. Resuelto
Si quisiera usar un componente de Input que reciba la referencia a través de forwardRef.
davy.ai
Para usar un componente de entrada que reciba el ref a través de forwardRef, puedes modificar el elemento de entrada para usar el componente Input y pasar el ref como una prop. Así es cómo se vería el código:
En el componente Input, puedes reenviar el ref al elemento de entrada subyacente utilizando la API
forwardRef
deReact
. Así es cómo se vería el componente Input:De esta manera, el componente Input maneja la lógica para manejar la presión de la tecla Enter y reenvía el ref al elemento de entrada subyacente, permitiéndote usarlo fácilmente dentro del componente Step1.