No React, existem duas abordagens principais para lidar com entradas de formulário:

• Componentes controlados
• Componentes não controlados

Componentes controlados fornecem mais controle e validação, enquanto componentes não controlados são mais simples e úteis para formas básicas de acesso intermitente a valores.

Componentes Controlados

Estas são entradas de formulário cujos valores são controlados pelo React State. As variáveis ​​de estado são atualizadas sempre que o valor da entrada muda, e o valor da entrada é definido explicitamente por meio da propriedade value.

O manipulador de eventos onChange é usado para atualizar o estado.

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

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

     return(
          
     );
}

No exemplo acima, a variável de estado nome controla o valor do campo de entrada. A função handleChange atualiza o estado do nome sempre que o valor de entrada muda e o valor de entrada é definido como o valor atual da variável de estado do nome por meio da propriedade value.

Componentes não controlados

Componentes não controlados são entradas de formulário que gerenciam seu estado internamente, em vez de serem controlados pelo React State. Você pode acessar o valor atual da entrada usando um ref após o envio do formulário ou sempre que necessário.

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

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

     return(
          

Neste exemplo acima, o inputRef é usado para criar um ref para o campo input. A função handleSubmit acessa o valor atual da entrada usando inputRef.current.value. A lógica de envio do formulário pode ser implementada para utilizar o valor de entrada conforme necessário.