J'essaie de récupérer la date de naissance saisie par l'utilisateur et de la convertir en son âge équivalent.

Dans la console affichant la valeur récupérée, mais elle n'est pas affectée à la variable d'état dob1, frappée par l'exécution de la fonction de calcul de l'âge.

L'intégralité du code est disponible dans le stackblitz et son lien : https://stackblitz. com/edit/react-geum6v?file=index.js

HTML

Number of male over certain age: <input type="date" name="date_of_birth" defaultValue= {dob1} onChange={this.handleChange_age}></input> <br /><br />

JS

handleChange_age = (event) => {
    console.log("DOB:", event.target.value);

    this.setState({ dob1: event.target.value })
    console.log(this.state.dob1);
    var age_latest = {age_latest: this.calculate_age}
    console.log(age_latest);

    this.setState({ age1: age_latest })
    console.log("Age:", this.state.age1);
  }

calculate_age = (dob1) => {
    var today = new Date();
    var birthDate = new Date(this.state.dob1);
    var age_now = today.getFullYear() - birthDate.getFullYear();
    var m = today.getMonth() - birthDate.getMonth();
    if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) 
    {
        age_now--;
    }
    console.log(age_now);
    return age_now;
  }
2
user11138609 16 mars 2019 à 22:38

2 réponses

Meilleure réponse

Premièrement, setState est de nature asynchrone. Donc, si vous voulez que la valeur de state nouvellement définie fasse quelque chose, utilisez le argument de rappel de setState.

Deuxièmement, calculate_age prend un argument dob. Vous pouvez l'utiliser directement dans votre fonction handleChange_age.

Voici le code modifié.

Votre fonction calculate_age utilise l'argument dob1 au lieu de this.state.dob1 :

calculate_age = (dob1) => {
    var today = new Date();
    var birthDate = new Date(dob1);  // create a date object directly from `dob1` argument
    var age_now = today.getFullYear() - birthDate.getFullYear();
    var m = today.getMonth() - birthDate.getMonth();
    if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) 
    {
        age_now--;
    }
    console.log(age_now);
    return age_now;
  }

Votre handleChange_age appelle désormais this.calculate_age avec event.target.value :

handleChange_age = (event) => {
    console.log("DOB:", event.target.value);

    this.setState({ dob1: event.target.value }, () => {
      // example of setState callback
      // this will have the latest this.state.dob1
      console.log(this.state.dob1);
    })

    // call calculate_age with event.target.value
    var age_latest = {age_latest: this.calculate_age(event.target.value)}
    console.log(age_latest);

    this.setState({ age1: age_latest }, () => {
      // this will have the latest this.state.age1
      console.log("Age:", this.state.age1);
    })
  }
7
mehamasum 16 mars 2019 à 20:08

Un autre calculate_age pour une raison quelconque, la fonction de mehamasum ne fonctionne pas pour moi

const calculate_age = dob => {
  const birthDate = new Date(dob); 
  const difference = Date.now() - birthDate.getTime();
  const age = new Date(difference);

  return Math.abs(age.getUTCFullYear() - 1970);
}
1
Sandeep Ranjan 13 août 2019 à 05:51