segue o código:
class App extends Component {
constructor(){
super();
this.state = {autores : [], nome: '', email: '', senha: ''};
this.enviaForm = this.enviaForm.bind(this);
this.setNome = this.setNome.bind(this);
this.setEmail = this.setEmail.bind(this);
this.setSenha = this.setSenha.bind(this);
}
componentDidMount(){
$.ajax({
url: 'http://127.0.0.1:8080/api/autores',
dataType: 'json',
success: function (dados) {
this.setState({autores:dados})
}.bind(this)
})
}
enviaForm(event){
event.preventDefault();
$.ajax({
url: "http://127.0.0.1:8080/api/autores",
contentType: "application/json",
dataType: "json",
method: 'post',
data: JSON.stringify({nome: this.state.nome , email: this.state.email, senha: this.state.senha}),
success: function () {
console.log('sucesso');
},
error: function () {
console.log('erro');
}
})
}
setNome (event){
this.setState({nome: event.target.value});
}
setEmail (event){
this.setState({email: event.target.value});
}
setSenha (event){
this.setState({senha: event.target.value});
}
render() {
return (
<div id="layout">
<main className="container">
<div className="row">
<div className="col-xs-12 col-sm-12 col-md-12">
<h2 className="text-center text-uppercase">Cadastro de Autores</h2>
</div>
</div>
<div className="row">
<div className="col-md-3"></div>
<form className="form col-md-6" method="POST" onSubmit={this.enviaForm}>
<div className="form-group">
<label htmlFor="nome">Nome</label>
<input type="text" id="nome" className="form-control" name="nome" value={this.state.nome} onChange={this.setNome} placeholder="Nome"/>
</div>
<div className="form-group">
<label htmlFor="email">E-mail</label>
<input type="email" id="email" className="form-control" name="email" value={this.state.email} onChange={this.setEmail} placeholder="seu@email.com"/>
</div>
<div className="form-group">
<label htmlFor="senha">Senha</label>
<input type="password" id="senha" className="form-control" name="senha" value={this.state.senha} onChange={this.setSenha} placeholder="Senha"/>
</div>
<button type="submit" className="btn btn-success">Salvar</button>
</form>
<div className="col-md-3"></div>
</div>
<div className="title-table">
<h3 className="text-center text-uppercase">Tabela de Autores</h3>
</div>
<div className="row">
<div className="col-md-3"></div>
<div className="col-md-6">
<table className="table table-bordered table-hover">
<thead>
<tr>
<th>Nome</th>
<th>E-mail</th>
</tr>
</thead>
<tbody>
{
this.state.autores.map(function(autor) {
return (
<tr>
<td>{autor.nome}</td>
<td>{autor.email}</td>
</tr>
)
})
}
</tbody>
</table>
</div>
<div className="col-md-3"></div>
</div>
</main>
</div>
);
}
}
export default App;