Não consigo realizar o bloqueio, "submit bloqueado",a SPA continua aceitando incluir linhas, no vídeo não aceita !!! e nem da erro. Para mim aparece 2 erros, ao inspecionar a pagina, veja abaixo!
Download the React DevTools for a better development experience: https://fb.me/react-devtools
index.js:1375
Warning: Invalid DOM property class. Did you mean className?
in a (at Header.js:7)
in div (at Header.js:6)
in nav (at Header.js:5)
in Header (at App.js:60)
in App (at src/index.js:8)
console. @ index.js:1375
index.js:1375
Warning: A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components
in input (at Formulario.js:49)
in div (at Formulario.js:47)
in div (at Formulario.js:35)
in form (at Formulario.js:34)
in Formulario (at App.js:63)
in div (at App.js:61)
in App (at src/index.js:8)
**Formulario.js**
import React, { Component } from 'react';
import FormValidator from './FormValidator';
class Formulario extends Component {
constructor(props) {
super(props);
this.validador = new FormValidator();
this.stateInicial = {
nome: '',
livro: '',
preco: '',
}
this.state = this.stateInicial;
}
submitFormulario = () => {
if(this.validador.valida(this.state)){
this.props.escutadorDeSubmit(this.state);
this.setState(this.stateInicial);
}else{
console.log('Submit Bloqueado');
}
}
escutadorDeInput = event => {
const { name, value } = event.target;
this.setState({[name]: value });
}
render() {
const { nome, livro, preco } = this.state;
return (
<form>
<div className="row">
<div className="input-field col s4">
<label className="input-field" htmlFor="nome">Nome</label>
<input className="validate" id="nome" type="text" name="nome" value={nome} onChange={this.escutadorDeInput} />
</div>
<div className="input-field col s4">
<label className="input-field" htmlFor="livro">Livro</label>
<input className="validate" id="livro" type="text" name="livro" value={livro} onChange={this.escutadorDeInput} />
</div>
<div className="input-field col s4">
<label className="input-field col s4" htmlFor="preco">Preço</label>
<input className="validate" id="preco" type="text" name="preco" value={preco} onChange={this.escutadorDeInput} />
</div>
</div>
<button onClick={this.submitFormulario} className="btn waves-effect waves-light indigo lighten-2" type="button">Salvar</button>
</form>
);
}
}
export default Formulario