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:

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

July 13, 2023 at 1:59 pm

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:

import Input from './Input'; // asumiendo que el componente Input existe en un archivo separado

const array = new Array(5).fill(null).map(() => createRef());

const Step1 = () => {
  return (
    <>
      {/* Formulario */}
      <form style="{{" margin:="" 30="" }}="">
        {/* Mapear sobre el array y renderizar un input para cada elemento */}
        {array.map((item, index) => {
          return (
            <input key="{index}" ref="{item}" placeholder="{`Input" ${index="" +="" 1}`}="" onenter="{()" ==""> {
                if (array[index + 1]) {
                  array[index + 1].current.focus();
                } else {
                  console.log('submit');
                }
              }}
            />
          );
        })}
        <button type="submit">Enviar</button>
      </form>

  );
};

export default Step1;

En el componente Input, puedes reenviar el ref al elemento de entrada subyacente utilizando la API forwardRef de React. Así es cómo se vería el componente Input:

import React, { forwardRef } from 'react';

const Input = forwardRef((props, ref) => {
  const { onEnter, ...rest } = props;

  const handleKeyPress = (e) => {
    if (e.key === 'Enter') {
      e.preventDefault();
      onEnter();
    }
  };

  return <input {...rest}="" ref="{ref}" onkeypress="{handleKeyPress}">;
});

export default 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.

es.davy.ai

¿Tienes una pregunta?

Renderizar un array de referencias

Answer

davy.ai