Olhando os feedbacks até aqui, não é segredo pra ninguém, como este curso é especial... Para ajudar a compreender melhor a lógica da validação, segue os pontos importantes:
1) Quando a view é carregada, tenha em mente que as validações já estão definidas na instancia do FormValidator.js
class FormValidator {
constructor(validacoes){//elas chegam pelo construtor
this.validacoes = validacoes;
console.log(this.validacoes);//p/ constatação do q se fala
}2) Se vc não lembra quais são, observe q elas são definidas em Formulario.js
this.validador = new FormValidator([
{
campo:'nome',
metodo:'isEmpty',
validoQuando: false,
mensagem: 'Preencha o campo Nome'
},
{
campo:'livro',
metodo:'isEmpty',
validoQuando: false,
mensagem: 'Preencha o campo Livro'
},
{
campo:'preco',
metodo:'isInt',
args: [{min:0, max:99999}],
validoQuando: true,
mensagem: 'Preencha o campo Preço com valor numérico'
}
]);3) Blz. Compreenda que nos nossos campos do formulário, há o evento onChange() associado. Ou seja, a cada dado informado nos campos, um metodo é chamado
//classe Formulario.js . Olhe dentro do metodo render()!
<input
className="validate"
id="nome"
type="text"
name="nome"
value={nome}
onChange={this.escutadorDeInput}
/>4) Este metodo chama-se 'escutadorDeInput' e ele recebe um evento. Por meio do event.target, descobrimos qual elemento do DOM o disparou. Ex: Eu posso está preenchendo Nome e o event.target está retornando por debaixo dos panos:
<input id="nome" type="text" name="nome" value="Josh">5) do event.target, o que me interessa somente é as propriedades name e value.(name = nome do elementoHTML / value = valor digitado pelo usuario.) Eu passo tais infos p/ uma constante:
const { name, value } = event.target;6) Finalizando o entendimento do metodo 'escutadorDeInput', ainda temos a seguinte instrução:
this.setState({
[name]: value
});6.1) Lembra que temos o state associado ao formulario? Pois então, recorde tbm que a unica forma de atualizar os dados contidos dentro de um state é via .setState({informando o atributo : "valor a ser alterado"}). 6.2) [name] sempre equivale a um campo de nosso state. Ex: [name] : value é o mesmo que dizer atributo : "valor". Para ilustração, seria:
this.setState({
[nome]: "Josh"//altere o valor do atributo nome contido no state!
});6.3) Se vc não lembra em que momento o state foi definido, observe seu arquivo Formulario.js, na parte do constructor!
this.stateInicial = {
nome: '',
livro: '',
preco: '',
validacao: this.validador.valido()
}
this.state = this.stateInicial;Continua no próximo post...