Lorsque je clique sur le bouton soumettre, il faut des clics pour déclencher correctement la fonction. Je n'ai pas eu de problème avant d'implémenter les instructions if. At-il quelque chose avec le fait que j'ai 2 instructions if à l'intérieur et après chaque clic, il vérifie seulement 1 instruction if?

  onSubmit = (e) => {

const { firstName, lastName, email, eventDate, validation} = this.state

if (firstName, lastName, eventDate, email) {
  this.setState({validation: true})
  if (new RegExp(/[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,15}/g).test(email)) {
    this.setState({validation: true})
  } else {
    this.setState({validation: false})
    this.setState({errorMessage: 'Please enter correct email adress'})
  }
} else {
  this.setState({validation: false});
  this.setState({errorMessage: 'Please fill in all fields properly'})
} 

if (validation) {

  const newEvent = {
    firstName: this.state.firstName,
    lastName: this.state.lastName,
    email: this.state.email,
    eventDate: this.state.eventDate
  }

  this.props.addEvent(newEvent);

  this.setState({
    firstName: '',
    lastName: '',
    email: '',
    eventDate: '',
    validation: false,
    errorMessage: ''
  });
}

e.preventDefault();
}
1
D.Wasilewski 20 nov. 2018 à 21:52

3 réponses

Meilleure réponse

Correction de ce problème, la clé du succès était de déplacer mon corps d'instruction if (validation) vers la fonction de rappel de setState.

Voici le code de travail:

  onSubmit = (e) => {
const { firstName, lastName, email, eventDate, validation} = this.state

if (firstName, lastName, eventDate, email) {
  this.setState({validation: true})
  if (new RegExp(/[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,15}/g).test(email)) {
    this.setState({validation: true}, () => {
      const newEvent = {
        firstName: firstName,
        lastName: lastName,
        email: email,
        eventDate: eventDate
      }
      this.props.addEvent(newEvent);

      this.setState({
        firstName: '',
        lastName: '',
        email: '',
        eventDate: '',
        validation: false,
        errorMessage: ''
      })
    })
  } else {
    this.setState({validation: false, errorMessage: 'Please enter correct email adress'})
  }
} else {
  this.setState({validation: false, errorMessage: 'Please fill in all fields properly'})
}
e.preventDefault();
}
0
D.Wasilewski 20 nov. 2018 à 19:39

Vous ne devriez pas non plus avoir besoin d'avoir deux appels setState directement l'un après l'autre. Faites-les dans un setState à la place comme ceci:

This.setState ({validation: false, message d'erreur: 'Veuillez saisir la bonne adresse e-mail',)}

0
weibenfalk 20 nov. 2018 à 19:08

Je pense que vous utilisez une valeur périmée de validation dans l'instruction if (validation). Pouvez-vous essayer quelque chose comme:

onSubmit = (e) => {

const { firstName, lastName, email, eventDate} = this.state

if (firstName, lastName, eventDate, email) {
  this.setState({validation: true})
  if (new RegExp(/[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,15}/g).test(email)) {
    this.setState({validation: true})
  } else {
    this.setState({validation: false})
    this.setState({errorMessage: 'Please enter correct email adress'})
  }
} else {
  this.setState({validation: false});
  this.setState({errorMessage: 'Please fill in all fields properly'})
} 

const {validation} = this.state // read correct validation.. not something that was previously set

if (validation) {

  const newEvent = {
    firstName: this.state.firstName,
    lastName: this.state.lastName,
    email: this.state.email,
    eventDate: this.state.eventDate
  }

  this.props.addEvent(newEvent);

  this.setState({
    firstName: '',
    lastName: '',
    email: '',
    eventDate: '',
    validation: false,
    errorMessage: ''
  });
}

e.preventDefault();
}
0
shmit 20 nov. 2018 à 19:24