1

Eu estava tentando fazer que quando o usuarios pressionasse o botao de submit, ele checava o que o usuario inseriu, e caso nao foisse valido ele emitia uma mensagem de erro atravez do span.Obs:cortei o codigo para facilitar a leitura, mas o problema ta nesta parte.

import React from 'react';

export class FormSignUp extends React.Component{
constructor(){
  super();
  this.state = {
    firstName: '',
    lastName: '',
    email: '',
    password: '',
    rePassword: '',
    day:'default',
    month: 'default',
    year: 'default',
    gender:'1'
  };
}

  changeInp = e =>{
    this.setState({
      [e.target.name]: e.target.value
    });
  };
errors = {
  nameError: ''
}
  onSubmit = (e) => {
    e.preventDefault();
    if(this.state.firstName.length < 3){
      this.errors.nameError = 'ta errado isso dai';
    }
      alert('submit');
    console.log(this.state);
  }



  render(){
    return(
      <div className='formSignUp'>
        <div className='fullSameInputS'>
          <form>
            <div className='nameDiv halfInput'>
              <input type="text" name='firstName' value={this.state.firstName} onChange={e => this.changeInp(e)} className='signUpFstNameInput' placeholder='Nome'/>
              <span>{this.errors.nameError}</span>
            </div>

1 Resposta 1

1

Assim como você já usa state para exibir o firstName, vc deve usar o state para retornar o erro p/ ser exibido na tela. Como você criou uma propriedade errors dentro do seu escopo this, o método render nunca vai ser chamado (e consequentemente o componente não será atualizado na tela), porque o React só vai atualizar seu componente se o estado dele mudar.

As mudanças que você pode fazer no seu código são essas aqui

Atualizar o método que modifica o erro

onSubmit = (e) => {
  e.preventDefault();
  if(this.state.firstName.length < 3){
    this.setState({ nameError: 'ta errado isso dai' });
  }
    alert('submit');
  console.log(this.state);
}

Atualizar a tag span

<span>{this.state.nameError}</span>

Perceba que eu removi o escopo error, pq vc não precisa dele, se vc usa-lo, sempre use shallow objects (ou objetos c/ 1 nivel de hirearquia) no state para ajudar o React a fazer o shallow compare, caso seu componente seja PureComponent.

1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .