Рассчитать возраст по дате рождения, введенное пользователем в ответ
Я пытаюсь получить введенную пользователем дату рождения и преобразовать ее в эквивалентный возраст.
В консоли, показывающей полученное значение, но не присвоенное переменной состояния 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.handleChangeEvent_age}></input> <br /><br />
JS
handleChangeEvent_age = (event) => {
console.info("DOB:", event.target.value);
this.setState({ dob1: event.target.value })
console.info(this.state.dob1);
var age_latest = {age_latest: this.calculate_age}
console.info(age_latest);
this.setState({ age1: age_latest })
console.info("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.info(age_now);
return age_now;
}
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Во-первых, setState асинхронна по своей природе. Поэтому, если вы хотите, чтобы новое установленное значение state что-то делало, используйте аргумент обратного вызова setState.
Во-вторых, calculate_age принимает dob аргумент. Вы можете использовать это непосредственно внутри вашей функции handleChangeEvent_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.info(age_now);
return age_now;
}
Ваш handleChangeEvent_age теперь звонит this.calculate_age с event.target.value:
handleChangeEvent_age = (event) => {
console.info("DOB:", event.target.value);
this.setState({ dob1: event.target.value }, () => {
// example of setState callback
// this will have the latest this.state.dob1
console.info(this.state.dob1);
})
// call calculate_age with event.target.value
var age_latest = {age_latest: this.calculate_age(event.target.value)}
console.info(age_latest);
this.setState({ age1: age_latest }, () => {
// this will have the latest this.state.age1
console.info("Age:", this.state.age1);
})
}
Большое спасибо за вашу помощь ... код работает ... также можете ли вы предложить свое предложение для другой проблемы, где приведена ссылка ниже: stackoverflow.com/questions/55192426/…
Конечно, я посмотрю на это :) Если это решение сработало для вас, пожалуйста, отметьте это как принятое.
эй, я принял... не могли бы вы помочь мне с другим вопросом?
Еще calculate_age у меня почему-то не работает функция мехамасума
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);
}
Я бы рекомендовал использовать momentJS. Это отлично работает для вашего сценария.