Eu fiz usando fetch, porém modifiquei umas coisas que o professor está ensinando.
O construtor ficou assim:
constructor() {
super();
this.state = {
authors: [],
model: { nome: '', email: '', senha: '' },
};
this.enviaForm = this.enviaForm.bind(this);
}
A função enviaForm com fetch ficou assim:
enviaForm = (e) => {
e.preventDefault();
const Uri = 'http://localhost:8080/api/autores';
const { model } = this.state;
const requestInfo = {
method: 'POST',
body: JSON.stringify(model),
headers: new Headers({
'Content-type': 'application/json'
})
};
fetch(Uri, requestInfo)
.then(response => {
if(response.ok) return response.text();
throw new Error("Oops! Ocorreu um erro! :(");
})
.then(data => {
this.setState({ authors: JSON.parse(data), model: {nome: '', email: '', senha: ''} });
})
.catch(e => console.log(e));
}
E o formulário ficou assim:
<form className="pure-form pure-form-aligned" onSubmit={this.enviaForm} method="POST">
<div className="pure-control-group">
<label htmlFor="nome">Nome</label>
<input id="nome" type="text" name="nome" value={this.state.model.nome} onChange={(e) => {
var { model } = this.state;
model.nome = e.target.value;
this.setState({ model });
}} />
</div>
<div className="pure-control-group">
<label htmlFor="email">Email</label>
<input id="email" type="email" name="email" value={this.state.model.email} onChange={(e) => {
var { model } = this.state;
model.email = e.target.value;
this.setState({ model });
}} />
</div>
<div className="pure-control-group">
<label htmlFor="senha">Senha</label>
<input id="senha" type="password" name="senha" value={this.state.model.senha} onChange={(e) => {
var { model } = this.state;
model.senha = e.target.value;
this.setState({ model });
}} />
</div>
<div className="pure-control-group">
<label></label>
<button type="submit" className="pure-button pure-button-primary">Gravar</button>
</div>
</form>
