React.js: Formulários

Afluentes: Desenvolvimento Front-end II, Usabilidade, desenvolvimento web, mobile e jogos

Forms React

Os formulários são adicionados como qualquer outro elemento.

class MyForm extends React.Component {
  render() {
    return (
      <form>
        <h1>Hello</h1>
        <p>Enter your name:</p>
        <input
          type="text"
        />
      </form>
    );
  }
}
ReactDOM.render(<MyForm />, document.getElementById('root'));

Gerenciando os Forms

• Podemos gerenciar em tempo de execução os dados dos formulários quando eles mudam de valor ou são enviados.
• No HTML a gente vê como objetos DOM, no React, os dados são vistos como componentes.
• Quando um dado é pego por um componente, ele é armazenado no state.
• Você pode controlar os eventos com o atributo onChange.

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { username: '' };
  }
  myChangeHandler = (event) => {
    this.setState({username: event.target.value});
  }
  render() {
    return (
      <form>
      <h1>Hello {this.state.username}</h1>
      <p>Enter your name:</p>
      <input
        type='text'
        onChange={this.myChangeHandler}
      />
      </form>
    );
  }
}

ReactDOM.render(<MyForm />, document.getElementById('root'));

Renderização Condicional

Podemos usar condicionais para renderizar de forma diferente o HTML.

Por exemplo, criamos um objeto chamado header em que quando o campo username estiver vazio, ele é renderizado vazio, quando o campo username não estiver vazio, ele coloca outras informações adicionais e coloca dentro de tags de título.

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { username: '' };
  }
  myChangeHandler = (event) => {
    this.setState({username: event.target.value});
  }
  render() {
    let header = '';
    if (this.state.username) {
      header = <h1>Hello {this.state.username}</h1>;
    } else {
      header = '';
    }
    return (
      <form>
      {header}
      <p>Enter your name:</p>
      <input
        type='text'
        onChange={this.myChangeHandler}
      />
      </form>
    );
  }
}

ReactDOM.render(<MyForm />, document.getElementById('root'));

Submit Forms

Você pode controlar o envio de um formulário gerenciando o evento de envio do formulário chamando no atributo onSubmit o método que escrevemos para analizar tratar o evento.

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { username: '' };
  }
  mySubmitHandler = (event) => {
    event.preventDefault();
    alert("You are submitting " + this.state.username);
  }
  myChangeHandler = (event) => {
    this.setState({username: event.target.value});
  }
  render() {
    return (
      <form onSubmit={this.mySubmitHandler}>
      <h1>Hello {this.state.username}</h1>
      <p>Enter your name, and submit:</p>
      <input
        type='text'
        onChange={this.myChangeHandler}
      />
      <input
        type='submit'
      />
      </form>
    );
  }
}

ReactDOM.render(<MyForm />, document.getElementById('root'));

Múltiplas entradas de dados

Controlamos as múltiplas entradas com o atributo name do campo. Isso vai estar dentro do objeto event. Para alterar um elemento, usamos o método this.setState.

Aqui vamos criar uma aplicação para testar, então usamos o npx

npx create-react-app app_name

onde app_name deve ser substituído pelo nome da aplicação que você quer criar. Depois alteramos o arquivo App.js conforme o código abaixo:

import './App.css';
import { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      age: null,
    };
  }
  myChangeHandler = (event) => {
    let nam = event.target.name;
    let val = event.target.value;
    this.setState({ [nam]: val });
  }
  render() {
    return (
      <form>
        <h1>Hello {this.state.username} {this.state.age}</h1>
        <p>Enter your name:</p>
        <input
          type='text'
          name='username'
          onChange={this.myChangeHandler}
        />
        <p>Enter your age:</p>
        <input
          type='text'
          name='age'
          onChange={this.myChangeHandler}
        />
      </form>
    );
  }
}

export default App;

Atividade

Crie uma aplicação com um formulário de cadastro de (funcionário, cliente, fornecedor, etc.) e valide os campos enquanto o usuário do sistema está entrando com as informações. Ao submeter, monte um texto no estilo carta formal que será usado para enviar um e-mail com todas as informações digitadas.

Observações:

• Você deve implementar a atividade em uma aplicação criada com o npx create-react-app.
• O botão enviar só ficará habilitado após o formulário estar totalmente validado.
• O texto do e-mail só irá aparecer depois de clicar no botão enviar.
• Faça o uso de classes e funções.
• Utilize states.