Os formulários são, em grande parte, as principais entradas de comunicação entre o utilizador e plataforma. De forma a implementar os formulários em React vamos fazer uso do State. Assim desta forma vamos apresentar um modelo de 2 way data binding bastante simples.

O State dos componentes React e um tipo de dados que permite controlar o próprio componente. Consoante as alterações feitas a este tipo de dados o componente sofre alterações lógicas e visuais.

De forma a dar continuidade ao guia aqui apresentado, é aconselhado visualizarem esta publicação

Formulário

Em primeiro lugar vamos criar um componente composto por um formulário. Dentro do ficheiro App.js criado anteriormente vamos adicionar o seguinte código:

<div className="form">
  <form>
    <label>
      Name:
      <input type="text" name="name" />
    </label>
    <input type="submit" value="Submit" />
  </form>
</div>

Na pagina web deverão de ver algo do género:

react-formulario

Com o formulário inserido vamos então torna o input num componente controlado pelo React. Para isso vamos:

  • declarar o constructor no inicio do componente
  • iniciar o state com uma entrada para o input do nome
  • Criar uma função para actualizar o state

O vosso ficheiro deverá de se parecer a algo deste género:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {

  constructor(){
    super()
    this.state = {
      nome: ''
    }
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <div className="form">
          <form>
            <label>
              Name:
              <input type="text" name="name" />
            </label>
            <input type="submit" value="Submit" />
          </form>
        </div>
      </div>
    );
  }
}

export default App;

2 way data binding

Agora que temos o state iniciado e definido vamos editar o input para reflectir as alterações. Para isso temos de atribuir ao value do input o conteúdo do state, da seguinte forma:

<input value={this.state.nome} type="text" name="nome" />

Para que as alterações ao input sejam visíveis temos de actualizar o state de acordo com o valor. Vamos então adicionar o onChange ao input referindo a uma função com o nome handleName:

<input value={this.state.nome} onChange={this.handleName} type="text" name="nome" />

Em seguida vamos definir a função handleName com o código necessário para actualizar o state:

  handleName(e) {
    this.setState({
      nome: e.target.value
    })
  }

Para que esta função possa utilizar o this temos de especificar o contexto do mesmo. Dentro do constructor adicionamos a seguinte linha:

this.handleName = this.handleName.bind(this)

Neste momento temos um input que manipula o próprio state do componente. De forma a vermos o 2 way data binding em acção vamos adicionar a seguinte linha de código logo abaixo do form:

{this.state.nome}

Agora sempre que for inserido algo no input esse mesmo valor será apresentado logo a seguir ao formulário em tempo real.

O código completo do nosso componente:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {

  constructor() {
    super()
    this.state = {
      nome: ''
    }
    this.handleName = this.handleName.bind(this)
  }

  handleName(e) {
    this.setState({
      nome: e.target.value
    })
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <div className="form">
          <form>
            <label>
              Name:
              <input value={this.state.nome} onChange={this.handleName} type="text" name="nome" />
            </label>
            <input type="submit" value="Submit" />
          </form>
          {this.state.nome}
        </div>
      </div>
    );
  }
}

export default App;
There are currently no comments.

Este site utiliza o Akismet para reduzir spam. Fica a saber como são processados os dados dos comentários.