Soy relativamente nuevo con los componentes funcionales de React y estoy tratando de construir un sistema que construya formularios a partir de una variedad de objetos. Funciona hasta ahora, pero siento que me estoy perdiendo algo. Aquí está el código:
import React, { useState } from 'react'; import "./DynamicForm.css"; function DynamicForm(props) { const [formFields, setFormFields] = useState([ { name: "first_name", type: "text", value: "" }, { name: "last_name", type: "text", value: "" }, { name: "phone", type: "tel", value: "" }, { name: "email", type: "email", value: "" }, { name: "date_of_birth", type: "date", value: "" }, { name: "language", type: "select", options: ['en', 'es'], value: "" }, ]) const handleChange = (index, value) => { let newFormFields = [...formFields]; newFormFields[index].value = value; setFormFields(newFormFields); } const builtForm = ( <div> {formFields.map((field, index) => { return ( <div class="col-md-3" index={index}> <div class="form-group"> <label class="control-label">{field.name}</label> <input placeholder="" type={field.type} class="form-control" value={field.value} onChange={(e) => handleChange(index, e.target.value)} /> </div> </div> ) })} </div> ) return ( <div> <section> {builtForm} </section> </div>); } export default DynamicForm;Nota: corté el código hasta el núcleo para mejorar la legibilidad.
¿No es un poco demasiado simple? Cada vez que ingreso un nuevo carácter en una de las entradas generadas, todo el formulario con todos sus campos se vuelve a renderizar, ¿verdad? ¿Debo usar otros ganchos o diseñarlo de otra manera?
No estoy muy seguro de crear componentes dinámicamente como este sin tener la actualización completa del componente, pero aquí hay algunas ideas.
En primer lugar, en class JSX debe ser className . class ya es una palabra clave en JavaScript, por lo que usamos className , creo que así se llama en el dominio virtual, que es lo que realmente está editando/creando allí.
En segundo lugar, proporcione el apoyo clave a los componentes creados por un bucle. Esto ayuda con lo que se llama reconciliación . Ayudar a reaccionar a reconocer qué componentes realmente necesitan actualizarse. En su caso, todos sus campos tienen un accesorio de name único, por lo que puede cambiar el div dentro del mapa a esto:
return ( <div key={field.name} className='col-md-3' index={index}> ... </div> );Nunca utilice el índice del bucle para la clave .
A continuación, para este enfoque, para evitar la reproducción de todos los componentes internos, me gustaría usar el useMemo para almacenar en caché los elementos. El problema es que crearía el componente en un bucle, lo que va en contra de las " reglas de ganchos ".
Al final, mi enfoque sería crear un componente separado para cada campo en lugar de crearlos a través de un bucle. Sin embargo, me encantaría saber cómo algunas personas más experimentadas podrían abordar esto para lograr el enfoque dinámico.