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现在用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);
    })
  }

Answer 2

另一个<ng-select dropdownPosition="bottom" #summarySearch bindLabel="name" [loading]="typeaheadSearchStatus === 'loading'" (change)="filter()" clearable="true" formControlName="accounts" (focus)="onTypeAheadFocus()" (blur)="onTypeAheadBlur()" [items]="searchList" [markFirst]="false" [multiple]="true" [(ngModel)]="searchModel" typeToSearchText="{{ localeStrings.typeToSearchText }}" placeholder="{{ localeStrings.searchFor }}" (search)="searchBy('searchText',$event)" [typeahead]="typeaheadSearch"> <ng-template ng-label-tmp let-item="item" let-clear="clear"> {{item.name}} × </ng-template> </ng-select>由于某种原因mehamasum的功能对我不起作用

calculate_age

从出生日期算起年龄

2 个答案: