Pular para o conteúdo principal

React - Forms

No React podemos trabalhar com formulários de maneira padrão, onde a submissão produz uma navegação para outra página, e da maneira "React", onde teremos controle dos componentes para controle dos dados.

Componentes controlados

Por padrão, os componentes html "input", "textarea" e "select" mantém o próprio estado de acordo com as entradas que o usuário realiza, como vimos, com o React fazemos essa atualização apenas por meio do "setState", mas para trabalhar com formulários trabalharemos com uma mescla dessas duas ideias, fazendo com que o estado controlado pelo React seja nossa verdadeira fonte de dados, nossa fonte da verdade.

Para isso, basicamente precisaremos fazer com que o componente "input" tenha como valor uma das propriedades do estado e sempre que o valor do "input" for alterado atualizaremos esse estado:

import React from 'react';

class FormularioNome extends React.Component {
    constructor(props) {
      super(props);
      this.state = {value: ''};
  
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
    }
  
    handleChange(event) {
      this.setState({value: event.target.value});
    }
  
    handleSubmit(event) {
      alert('Nome: ' + this.state.value);
      event.preventDefault();
    }
  
    render() {
      return (
        <form onSubmit={this.handleSubmit}>
            <fieldset>
                <legend>Formulário nome:</legend>            
                <label>
                    Nome:
                    <input type="text" value={this.state.value} 
    onChange={this.handleChange} />
                </label>
                <input type="submit" value="Enviar" />
          </fieldset>
        </form>
      );
    }
  }

  export default FormularioNome

No exemplo acima temos um componente, "FormularioNome", que trabalha com um "input" que recebe valores referentes a um nome, perceba o evento "onchange" que utiliza a função "handleChange" para manter o estado atualizado.

textarea

No React o "textarea" também trabalha com a propriedade "value", dessa forma seu uso é idêntico a um "input" comum:

import React from 'react';

class FormularioTexto extends React.Component {
    constructor(props) {
      super(props);
      this.state = {value: ''};
  
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
    }
  
    handleChange(event) {
      this.setState({value: event.target.value});
    }
  
    handleSubmit(event) {
      alert('Texto: ' + this.state.value);
      event.preventDefault();
    }
  
    render() {
      return (
        <form onSubmit={this.handleSubmit}>
            <fieldset>
                <legend>Formulário texto:</legend>            
                <label>
                    Texto:
                    <textarea value={this.state.value} onChange={this.handleChange} />
                </label>
                <input type="submit" value="Enviar" />
          </fieldset>
        </form>
      );
    }
  }

  export default FormularioTexto

No exemplo anterior temos o componente "FormularioTexto", onde, a exemplo do que vimos com o "input", temos o evento "onchange" que utiliza a função "handleChange" para manter o estado atualizado, alterando o conteúdo do "textarea" de acordo com o digitado pelo usuário.

select

Com o componente "select" já temos valores definidos (lista suspensa), logo o que se altera é o item selecionado, e no React também determinamos essa seleção com o estado:

import React from 'react';

class FormularioFormaPagamento extends React.Component {
    constructor(props) {
      super(props);
      this.state = {value: 'dinheiro'};
  
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
    }
  
    handleChange(event) {
      this.setState({value: event.target.value});
    }
  
    handleSubmit(event) {
      alert('Forma pagamento: ' + this.state.value);
      event.preventDefault();
    }
  
    render() {
      return (
        <form onSubmit={this.handleSubmit}>
            <fieldset>
                <legend>Formulário forma pagamento:</legend>            
                <label>
                    Select:
                    <select value={this.state.value} onChange={this.handleChange}>
                        <option value="debito">Cartão de débito</option>
                        <option value="credito">Cartão de crédito</option>
                        <option value="cheque">Cheque</option>
                        <option value="dinheiro">Dinheiro</option>
                    </select>
                </label>
                <input type="submit" value="Enviar" />
          </fieldset>
        </form>
      );
    }
  }

  export default FormularioFormaPagamento

No código acima, temos como exemplo o componente "FormularioFormaPagamento", onde, a exemplo do que vimos com o "input", temos o evento "onchange" que utiliza a função "handleChange" para manter o estado atualizado, alterando o item selecionado de acordo com o escolhido pelo usuário.

checkbox

Com o componente "checkbox" determinamos a seleção de uma opção, logo o que se altera é a indicação de item selecionado, e no React também determinamos essa seleção com o estado:

import React from 'react';

class FormularioConfirmarContrato extends React.Component {
    constructor(props) {
      super(props);
      this.state = {value: true};
  
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
    }
  
    handleChange(event) {
      this.setState({value: event.target.checked});
    }
  
    handleSubmit(event) {
      alert('Confirma contrato: ' + this.state.value);
      event.preventDefault();
    }
  
    render() {
      return (
        <form onSubmit={this.handleSubmit}>
            <fieldset>
                <legend>Formulário confirmar contrato:</legend>            
                <label>
                    CheckBox:
                    <input type="checkbox" checked={this.state.value} 
onChange={this.handleChange} />                
                </label>
                <input type="submit" value="Enviar" />
          </fieldset>
        </form>
      );
    }
  }

  export default FormularioConfirmarContrato

No código acima, temos como exemplo o componente "FormularioConfirmarContrato", onde, a exemplo do que vimos com o "input", temos o evento "onchange" que utiliza a função "handleChange" para manter o estado atualizado, alterando o item selecionado de acordo com o escolhido pelo usuário.

radio

Com o componente "radio" já temos valores definidos, logo o que se altera é o item selecionado, e no React também determinamos essa seleção com o estado:

import React from 'react';

class FormularioSexoCliente extends React.Component {
    constructor(props) {
      super(props);
      this.state = {value: ''};
  
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
    }
  
    handleChange(event) {
      this.setState({value: event.target.value});
    }
  
    handleSubmit(event) {
      alert('Sexo cliente: ' + this.state.value);
      event.preventDefault();
    }
  
    render() {
      return (
        <form onSubmit={this.handleSubmit}>
            <fieldset>
                <legend>Formulário confirmar sexo cliente:</legend>            
                <label>
                    Masculino:
                    <input type="radio" name="sexo-cliente" value="masculino" 
checked={this.state.value === 'masculino'} 
onChange={this.handleChange} />                
                </label>
                <label>
                    Feminino:
                    <input type="radio" name="sexo-cliente" value="feminino" 
checked={this.state.value === 'feminino'} 
onChange={this.handleChange} />
                </label>
                <input type="submit" value="Enviar" />
          </fieldset>
        </form>
      );
    }
  }

  export default FormularioSexoCliente

No código acima, temos como exemplo o componente "FormularioSexoCliente", onde, a exemplo do que vimos com o "input", temos o evento "onchange" que utiliza a função "handleChange" para manter o estado atualizado, alterando o item selecionado de acordo com o escolhido pelo usuário.

Múltiplos inputs

Nos exemplos anteriores cada formulário tinha apenas um componente, mas bem sabemos que isso não é o comum, por padrão sempre teremos vários componentes em um mesmo formulário, logo precisamos de uma forma de controlar o estado de "n" componentes e no React conseguiremos isso determinado o componente a ter o estado alterado pela propriedade "name", recuperando ela do objeto alterado:

import React from 'react';

class FormularioCompra extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
          nome: '',
          contrato: false,
          endereco: '',
          pagamento: 'dinheiro'
        };
  
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
    }
  
    handleChange(event) {
        const target = event.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const name = target.name;
    
        this.setState({
          [name]: value
        });
    }
  
    handleSubmit(event) {
      alert(
          'Nome:' + this.state.nome + 
          '\nSexo:' + this.state.sexo + 
          '\nEndereço: ' + this.state.endereco +
          '\nPagamento: ' + this.state.pagamento +
          '\nContrato:' + this.state.contrato 
          );
      event.preventDefault();
    }
  
    render() {
      return (
        <form onSubmit={this.handleSubmit}>
            <fieldset>
                <legend>Formulário compra:</legend>            
                <label>
                    Nome cliente:
                    <input name="nome" value={this.state.nome} 
onChange={this.handleChange} />
                </label>
                <label>
                    Masculino:
                    <input type="radio" name="sexo" value="masculino" 
checked={this.state.sexo === 'masculino'} 
onChange={this.handleChange} />                
                </label>
                <label>
                    Feminino:
                    <input type="radio" name="sexo" value="feminino" 
checked={this.state.sexo === 'feminino'} 
onChange={this.handleChange} />
                </label>
                <label>
                    Endereço entrega:
                    <textarea name="endereco" value={this.state.endereco} 
onChange={this.handleChange} />
                </label>
                <label>
                    Forma pagamento:
                    <select value={this.state.pagamento} onChange={this.handleChange}>
                        <option value="debito">Cartão de débito</option>
                        <option value="credito">Cartão de crédito</option>
                        <option value="cheque">Cheque</option>
                        <option value="dinheiro">Dinheiro</option>
                    </select>
                </label>
                <label>
                    Li e entendi o contrato:
                    <input type="checkbox" name="contrato" 
checked={this.state.contrato} 
onChange={this.handleChange} />                
                </label>                

                <input type="submit" value="Enviar" />
          </fieldset>
        </form>
      );
    }
  }

  export default FormularioCompra

Em nosso último exemplo, componente "FormularioCompra" temos um "input" para o nome do cliente, um "radio" para determinar o sexo do cliente, um "textarea" para o endereço do cliente, um "select" para definir a forma de pagamento e um "checkbox" para confirmar o contrato.

file input

O "file input" é para envio de arquivos locais para manipulação por Javascript (File API) ou para envio a servidores e por ter um valor somente leitura não pode ter seu estado controlado pelo React.

Em breve veremos alguns pontos avançados e dentre eles como trabalhar com arquivos.


Os exemplos podem ser encontrados aqui.

Marcadores:

Comentários

Postar um comentário

Obrigado por Participar do programero, fique a vontade para agradecer, retificar, perguntar ou sugerir.

Mais visitadas

Aplicação Flask usando Nginx e Gunicorn

Aplicação Flask usando Nginx e Gunicorn Se você já desenvolveu uma aplicação Flask básica, sabe que o servidor de desenvolvimento embutido não é ideal para produção. Ele não é projetado para lidar com altos volumes de tráfego ou conexões simultâneas. Para tornar sua aplicação Flask mais robusta e pronta para produção, podemos usar o Gunicorn como servidor de aplicação e o Nginx como proxy reverso. Neste artigo, vamos adaptar o exemplo anterior ( Criando uma Aplicação CRUD com Flask, PostgreSQL e Docker ) para incluir o Nginx e o Gunicorn. O que são Nginx e Gunicorn? Gunicorn O Gunicorn (Green Unicorn) é um servidor de aplicação WSGI que roda aplicações Python como o Flask. Ele é eficiente e simples de configurar, lidando com múltiplas requisições ao mesmo tempo, algo que o servidor embutido do Flask não faz bem. Nginx O Nginx é um servidor web que atua como um proxy reverso. Ele recebe requisições HTTP e as encaminha ao Gunicorn. Além disso, o Nginx pode: Servir arquivos ...
Postar um comentário
Leia mais

Criando uma Aplicação CRUD com Flask, PostgreSQL e Docker

Criando uma Aplicação CRUD com Flask, PostgreSQL e Docker Neste guia, vamos criar uma aplicação básica que acessa um banco de dados PostgreSQL e realiza operações CRUD (Create, Read, Update, Delete). Vamos usar Flask e executar tudo com Docker. Sem estilos ou extras, apenas o essencial. Estrutura do Projeto crud-app/ |-- app/ | |-- app.py | |-- templates/ | | |-- index.html | | |-- edit.html |-- Dockerfile |-- requirements.txt |-- docker-compose.yml Passo 1: Dependências Crie um arquivo requirements.txt com as seguintes linhas: Flask==2.2.2 Flask-SQLAlchemy==3.0.2 psycopg2-binary==2.9.3 Werkzeug==2.2.2 Passo 2: Aplicação Flask Arquivo app/app.py : from flask import Flask, render_template, request, redirect, url_for from flask_sqlalchemy import SQLAlchemy app = Flask(__name__) # Configuração do banco de dados app.config['SQLALCHEMY_DATABASE_URI'] = 'postgresql://user:password@db:5432/crud_db' app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False db...
Postar um comentário
Leia mais

Criando sua Primeira Aplicação Web com Python e Docker

  Criando sua Primeira Aplicação Web com Python e Docker Hoje vamos fazer algo prático: criar uma aplicação web simples em Python usando Flask e executá-la dentro de um contêiner Docker. Se você não sabe exatamente o que é Docker ou Flask, não se preocupe! Vou explicar tudo de forma simples para que você consiga acompanhar sem problemas. O que é Docker? Docker é uma ferramenta que permite empacotar aplicações e suas dependências em contêineres, garantindo que elas funcionem da mesma forma em qualquer ambiente. Em outras palavras, com o Docker, você cria um ambiente isolado e padronizado para rodar suas aplicações. Como instalar o Docker Acesse o site oficial do Docker . Baixe e instale a versão apropriada para o seu sistema operacional (Windows, macOS ou Linux). Após a instalação, verifique se está tudo funcionando abrindo um terminal e executando: docker --version Se o Docker estiver instalado corretamente, ele vai exibir a versão instalada. O que é Flask? Flask é um m...
Postar um comentário
Leia mais