Formulários

Revisão sobre objetos

Criando formulários no React

Agenda

Objetos

Coleções de propriedades, que podem adicionar propriedades a (e remover propriedades de) o que quisermos.

var usuario = {
    nome: 'cicero',
    gostos: ['jogar', 'jogar', 'jogar']
};

Formulários

<form>
  <label>
    Usuario:
    <input type="text" name="usuario" />
  </label>
  <input type="submit" value="Enviar" />
</form>

html

render() {
 return (
   <form onSubmit={this.pegarEnvio}>
     <label>
       Usuário:
       <input
         type="text"
         value={this.state.usuario}
         onChange={this.pegarDado}
       />
      </label>
    <input type="submit" value="Enviar" />
  </form>
 );
}

react

render!

recebe o dado...

muda o estado

exibe o estado

onChange={this.pegarDado}
this.setState()
{this.state.usuario}

Normalmente o estado é mantido na propriedade state dos componentes e atualizado apenas com setState().

pegarDado = (event) => {
  this.setState({
    usuario: event.target.value
  });
}

Prevenindo o Reload da página ao clicar no submit

pegarEnvio = (event) => {
  console.log('Usuário enviado : ' + this.state.usuario);
  event.preventDefault();
}

Vamos praticar?

Feedback é um presente

Referências

Até a próxima!

Made with Slides.com