Tengo un formulario complejo (con más de 70 entradas) y tiene muchas entradas diferentes y formularios secundarios... Decidí agregar una etiqueta from y luego repetir todas las entradas dentro de eso:
<form> <input name="email" /> <input name="age" /> <input name="address" /> . . . { loop on state (Array) to render other re-usable form component for category or city etc. } { another loop on state (Array) to render file inputs and checkboxes etc. } . . . </form>De hecho, debería obtener una API de datos y luego generar ese formulario para recopilar datos del usuario (no tenemos un formulario fijo y común, depende del cliente y muchas cosas...). Después de eso, decidí olvidarme de las entradas controladas, porque tengo que hacer un componente espagueti y complejo para manejar muchos estados para esta situación. Decidí usar algo como Formik, ¡pero eso no es realmente fácil! porque tengo que pasar muchos métodos API para manejar entradas personalizadas en valores de cambio...
Por lo tanto, he decidido obtener valores de formulario mediante el evento onSubmit (sin ref):
const handleSubmit = (e) => { e.preventDefault(); const values = new FormData(e.target); sendForm(values); // sending form by post method and formData } <form onSubmit={handleSubmit}> . . . </form>Pero tengo una pregunta importante, ¿afecta la entrada descontrolada en el rendimiento de React? ¿O no es la mejor práctica y tengo que encontrar una solución para implementar el formulario mediante entradas controladas?
No. No hay ningún problema con el uso de entradas no controladas en el rendimiento de React. Debe usar entradas controladas cuando necesite validación en tiempo real o verificar el estado de entrada en el cambio. Pero si no necesita ninguna verificación en tiempo real, usar FormData es una buena práctica.