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();
}
Feedback é um presente
Referências