En React, hay dos enfoques principales para manejar las entradas de formulario:

• Componentes controlados
• Componentes no controlados

Los componentes controlados brindan más control y validación, mientras que los componentes no controlados son más simples y útiles para formas básicas de acceso intermitente al valor.

Componentes controlados

Estas son entradas de formulario cuyos valores están controlados por React State. Las variables de estado se actualizan cada vez que cambia el valor de la entrada, y el valor de la entrada se establece explícitamente a través de la propiedad value.

El controlador de eventos onChange se utiliza para actualizar el estado.

import React, { useState } from "react";
function ControlledComponent() {
     const [name, setName] = useState("")

     const handleChange = (e) => {
          setName(e.target.value);
     }

     return(
          
     );
}

En el ejemplo anterior, la variable de estado nombre controla el valor del campo de entrada. La función handleChange actualiza el estado del nombre cada vez que el valor de entrada cambia y el valor de entrada se establece en el valor actual de la variable de estado del nombre a través de la propiedad de valor.

Componentes no controlados

Los componentes no controlados son entradas de formularios que administran su estado internamente, en lugar de ser controlados por React State. Puede acceder al valor actual de la entrada usando una ref después de enviar el formulario o cuando sea necesario.

import React, { useRef } from "react";
function UncontrolledComponent() {
     const inputRef = useRef(null);

     const handleSubmit = (e) => {
          e.preventDefault();
          console.log(inputRef.current.value);
     };

     return(
          

En este ejemplo anterior, inputRef se utiliza para crear una ref para el campo input. La función handleSubmit accede al valor actual de la entrada usando inputRef.current.value. La lógica de envío del formulario se puede implementar para utilizar el valor de entrada según sea necesario.