时间戳

首页 > 解决方案 > 从反应中的出生日期用户输入值计算年龄

javascript - 从反应中的出生日期用户输入值计算年龄

问题描述

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

在显示获取的值但未分配给状态变量的控制台中，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 />

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

标签： javascripthtmlreactjs

解决方案

首先，setState本质上是异步的。因此，如果您想让新 setstate的值做某事，请使用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);
    })
  }

推荐阅读