Formulários React: Crie um Formulário Básico com Estado e Eventos

Introdução

No desenvolvimento web, formulários são essenciais para coletar a entrada do usuário. Em React, o manuseio de dados de formulário é um pouco diferente do HTML tradicional. A abordagem recomendada é usar uma técnica chamada "componentes controlados" (controlled components).

Com componentes controlados, os dados do formulário são gerenciados pelo estado do componente React. Isso torna o estado do React a "única fonte de verdade" (single source of truth), permitindo que você gerencie, valide e responda à entrada do usuário de maneira previsível.

Neste laboratório, você construirá um formulário simples com um único campo de texto e um botão de envio. Você aprenderá a:

Criar elementos de formulário em JSX.
Usar o hook useState para gerenciar o valor do input.
Lidar com a entrada do usuário com o evento onChange.
Processar envios de formulário com o evento onSubmit.

Ao final deste laboratório, você terá uma compreensão sólida dos fundamentos de formulários em React.

Criar elemento de input com atributo onChange

Nesta etapa, você começará criando a estrutura básica do nosso formulário. Isso inclui adicionar um elemento <form> e um campo de entrada de texto (<input>). Também adicionaremos o atributo onChange, que é crucial para rastrear as alterações no valor do input.

Primeiro, vamos preparar nosso ambiente de desenvolvimento. Precisamos instalar as dependências do projeto e iniciar o servidor de desenvolvimento.

Abra um terminal no WebIDE e execute os seguintes comandos, um por um. Certifique-se de estar no diretório ~/project/my-app.

cd my-app
npm install

Este comando instala todos os pacotes necessários definidos em package.json.

Agora, inicie o servidor de desenvolvimento:

npm run dev -- --host 0.0.0.0 --port 8080

Em seguida, navegue até o diretório my-app/src no explorador de arquivos à esquerda e abra o arquivo App.jsx. Modificaremos este arquivo para adicionar nosso formulário.

Substitua o conteúdo de App.jsx pelo seguinte código. Estamos adicionando uma tag <form> e um elemento <input> dentro dela. O atributo onChange é adicionado ao input, que será usado posteriormente para lidar com as mudanças de valor.

import "./App.css";

function App() {
  return (
    <form>
      <h1>React Form</h1>
      <label>
        Enter your name:
        <input type="text" onChange={() => {}} />
      </label>
    </form>
  );
}

export default App;

Após salvar o arquivo, mude para a aba Web 8080 na interface do LabEx. Você deverá ver um formulário simples com um campo de entrada de texto. Se você não vir as alterações, tente atualizar a aba. Neste momento, digitar no campo de entrada não fará nada, mas temos a estrutura básica pronta.

Manipular mudança com função atualizando estado

Nesta etapa, você tornará o campo de entrada interativo. Para fazer isso, precisamos armazenar seu valor no estado do componente. Usaremos o hook useState para criar uma variável de estado e uma função para atualizá-la.

Primeiro, precisamos importar o hook useState da biblioteca 'react'. Em seguida, declararemos uma variável de estado, vamos chamá-la de name, para armazenar o valor do input.

Em seguida, criaremos uma função chamada handleChange. Esta função será acionada toda vez que o usuário digitar no campo de entrada. Dentro desta função, usaremos a função setName fornecida por useState para atualizar nosso estado name com o valor atual do input, ao qual podemos acessar através de event.target.value.

Atualize seu arquivo App.jsx com o seguinte código:

import { useState } from "react";
import "./App.css";

function App() {
  // Create a state variable 'name' and a function 'setName' to update it
  const [name, setName] = useState("");

  // Define the event handler function
  const handleChange = (event) => {
    setName(event.target.value);
  };

  return (
    <form>
      <h1>React Form</h1>
      <label>
        Enter your name:
        {/* Connect the handler to the onChange event */}
        <input type="text" onChange={handleChange} />
      </label>
    </form>
  );
}

export default App;

Agora, quando você digitar no campo de entrada, a função handleChange será chamada e o estado name será atualizado a cada pressionamento de tecla. Embora você ainda não possa ver a mudança na tela, o estado do componente agora está rastreando o valor do input. Esta é a primeira metade da criação de um componente controlado.

Definir atributo value do input para o valor do estado

Nesta etapa, completaremos o padrão de "componente controlado". Um componente controlado é aquele cujo valor do input é guiado pelo estado do React, tornando o estado a "única fonte de verdade".

Para conseguir isso, precisamos vincular o atributo value do elemento <input> diretamente à nossa variável de estado name. Isso cria uma ligação de dados bidirecional:

O usuário digita, acionando onChange, que atualiza o estado.
A atualização do estado causa uma nova renderização, e o value do input é definido para o novo valor do estado.

Isso garante que a UI esteja sempre em sincronia com o estado do componente.

Modifique o elemento <input> em seu arquivo App.jsx para adicionar o atributo value, assim:

import { useState } from "react";
import "./App.css";

function App() {
  const [name, setName] = useState("");

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

  return (
    <form>
      <h1>React Form</h1>
      <label>
        Enter your name:
        {/* Bind the input's value to the state */}
        <input type="text" value={name} onChange={handleChange} />
      </label>
    </form>
  );
}

export default App;

Após salvar o arquivo, volte para a aba Web 8080. O formulário parecerá o mesmo, mas agora é um componente totalmente controlado. A exibição do campo de entrada é agora controlada diretamente pela variável de estado name em seu componente React.

Adicionar botão de submit com manipulador onClick

Um formulário não está completo sem uma forma de enviá-lo. Nesta etapa, você adicionará um botão de submit e um manipulador de eventos para processar o envio do formulário.

A maneira padrão e mais acessível de lidar com envios de formulário em React é usando o evento onSubmit no próprio elemento <form>. Isso garante que o formulário possa ser enviado clicando no botão ou pressionando a tecla "Enter" em um campo de entrada.

Primeiro, vamos adicionar um <button> com type="submit" dentro do nosso formulário. Em seguida, criaremos um novo manipulador de função, handleSubmit, e o anexaremos ao atributo onSubmit do elemento <form>.

Atualize seu arquivo App.jsx com o seguinte código:

import { useState } from "react";
import "./App.css";

function App() {
  const [name, setName] = useState("");

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

  // Create the submit handler function
  const handleSubmit = (event) => {
    // We will add more logic here in the next step
    console.log("Form was submitted");
  };

  return (
    // Attach the handler to the form's onSubmit event
    <form onSubmit={handleSubmit}>
      <h1>React Form</h1>
      <label>
        Enter your name:
        <input type="text" value={name} onChange={handleChange} />
      </label>
      {/* Add a submit button */}
      <button type="submit">Submit</button>
    </form>
  );
}

export default App;

Agora, se você for para a aba Web 8080, verá um botão "Submit". Se você clicar nele, poderá notar que a página recarrega rapidamente. Este é o comportamento padrão do navegador para o envio de formulários, que abordaremos na etapa final.

Prevenir submit padrão e registrar dados do formulário

Nesta etapa final, você completará a funcionalidade do formulário. Como você notou, clicar no botão de submit causa uma recarga completa da página. Em uma Aplicação de Página Única (SPA) como uma construída com React, queremos lidar com os envios de formulário usando JavaScript sem recarregar a página.

Para fazer isso, precisamos chamar event.preventDefault() dentro da nossa função handleSubmit. O objeto event é passado automaticamente para o manipulador de eventos, e este método interrompe a ação padrão do navegador.

Assim que tivermos prevenido o comportamento padrão, podemos acessar os dados enviados do nosso estado e fazer algo com eles, como mostrar um alerta ao usuário.

Vamos atualizar a função handleSubmit em App.jsx para implementar essa lógica.

import { useState } from "react";
import "./App.css";

function App() {
  const [name, setName] = useState("");

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

  const handleSubmit = (event) => {
    // Prevent the default form submission behavior
    event.preventDefault();
    // Show an alert with the submitted name
    alert(`A name was submitted: ${name}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <h1>React Form</h1>
      <label>
        Enter your name:
        <input type="text" value={name} onChange={handleChange} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

export default App;

Salve o arquivo. Agora, vá para a aba Web 8080, digite um nome no campo de entrada e clique no botão "Submit". Você deverá ver um alerta aparecer com o nome que você inseriu, e a página não recarregará.

Parabéns! Você construiu com sucesso um formulário controlado básico em React.

Resumo

Neste laboratório, você aprendeu os princípios fundamentais de manipulação de formulários em React usando o padrão de "componentes controlados".

Você conseguiu com sucesso:

Criar um formulário com um campo de entrada e um botão de submit usando JSX.
Usar o hook useState para gerenciar os dados do formulário no estado do componente.
Implementar um manipulador de evento onChange para atualizar o estado conforme o usuário digita, mantendo a UI e o estado sincronizados.
Manipular o envio do formulário com um manipulador de evento onSubmit, prevenindo a recarga padrão da página do navegador usando event.preventDefault().
Acessar os dados do formulário do estado após o envio.

Esses conceitos são os blocos de construção para criar formulários mais complexos e interativos em suas aplicações React. Agora você pode aplicar esse conhecimento para construir formulários com múltiplas entradas, diferentes tipos de entrada e lógica de validação.

Fundamentos de Formulários em React