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.

Comentários

Mais visitadas

Funções de Data e Hora (Delphi)

É muito comum nos depararmos no dia a dia com a necessidade de manipular datas e horas, seja para um calculo de permanência, dias de atraso enfim, é praticamente escapar de alguma situação que necessite desse tipo de controle. Assim como a necessidade e se utilizar algum recurso para manipular as datas e horas de alguma maneira e freqüente, as duvidas de como o faze-lo também é, basta um breve olhar em qualquer fórum especializado e lá está, alguma duvida relacionada, por isso decidi falar um pouco sobre uma unit muito poderosa chamada DateUtils para a manipulação de data e hora, com um grande numero de métodos e classes que facilitam a vida de qualquer um. Alguns exemplos: CompareDate(constA, B: TDateTime): TValueRelationship; Compara apenas a data de dois valores (do tipo TDateTime) retornando: LessThanValue O primeiro valor é menor que o segundo EqualsValue Os valores são iguais GreaterThanValue O primeiro valor é maior que o segundo CompareDateTime(const A, B: TD

Funções de data Oracle

  Com o Oracle é possível obter uma série de resultados a partir de uma ou mais datas, como por exemplo verificar o último dia do mês ou verificar a quantidade de meses entre duas datas, então vamos a alguns exemplos:   Data atual do sistema: SYSDATE Remover meses de uma data: ADD_MONTHS(SYSDATE, -1) Adicionar meses de uma data: ADD_MONTHS(SYSDATE, +1) Buscar o último dia do mês: LAST_DAY(SYSDATE) Primeiro dia do mês: TRUNC(SYSDATE, ‘MONTH’) Quantidade de meses entre duas datas: MONTHS_BETWEEN(SYSDATE, ‘27/07/1982’) Primeiro dia do ano: TRUNC(SYSDATE, ‘YEAR’) Dias da semana: DECODE( TO_NUMBER( TO_CHAR          (SYSDATE, ‘D’) ) ,1, ‘domingo’ ,2, ‘segunda-feira’ ,3, ‘terça-feira’ ,4, ‘quarta-feira’ ,5, ‘quinta-feira’ ,6, ‘sexta-feira’ ,7,’sábado’ )

Iniciar e Parar Serviços do Windows (Delphi)

Em certas ocasiões nos deparamos com a necessidade de manipular determinadas atividades do SO, como iniciar ou parar um banco de dados, ou qualquer outro serviço que esteja funcionando no momento. Segue abaixo um código que encontrei na Internet para tal finalidade (não me recordo à fonte, assim que eu a encontrar colocarei). Iniciar Serviço: uses WinSvc; // // start service // // return TRUE if successful // // sMachine: //   machine name, ie: \SERVER //   empty = local machine // // sService //   service name, ie: Alerter // function ServiceStart(   sMachine,   sService : string ) : boolean; var   //   // service control   // manager handle   schm,   //   // service handle   schs   : SC_Handle;   //   // service status   ss     : TServiceStatus;   //   // temp char pointer   psTemp : PChar;   //   // check point   dwChkP : DWord; begin   ss.dwCurrentState := -1;   //