javascript - 根据 react 中的出生日期用户输入值计算年龄

Question

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

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

Answer 1

首先，setState 本质上是异步的。所以如果你想让新设置的 state 的值做一些事情，使用 callback argument of 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 现在使用 event.target.value 调用 this.calculate_age:

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