从出生日期算起年龄

用户名

我正在尝试获取用户输入的生日值并将其转换为等效年龄。

在显示获取的值但未分配给状态变量的控制台中，该值dob1随年龄计算函数的执行而变化。

整个代码可在stackblitz中找到，并且它的链接为：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 />

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;
  }

Mehamasum

首先，setState本质上是异步的。因此，如果您想让新设置state的值执行某项操作，请使用setState的回调参数。

其次，calculate_age需要一个dob说法。您可以在handleChange_age函数内部直接使用它。

这是修改后的代码。

您的calculate_age函数使用dob1参数代替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;
  }

你handleChange_age现在要求this.calculate_age有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);
    })
  }

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。