javascript - React Component 给我不可预测的结果

Question

所以我是 React.js 的新手，正在制作我的第一个组件。该组件的作用是根据所选日期和要添加的天数计算 future 日期。
用户从第一个日期选择器中选择一个日期，然后输入要添加到所选日期的天数。然后第二个日期选择器会自动显示最终日期。因此，当您更改第一个日期或天数时，最终日期选择器应反射(reflect)出来。

我尝试了很多，但我得到的结果非常不可预测，而且看起来很难调试

import React, { Component } from 'react';


class DateCalc extends Component {

DateCalcHandler (event) {
    console.log("DateCalc: "+this.state.numberOfDays);
    let selectedDate = new Date(this.refs.date.value);
    console.log("Current Date: "+selectedDate);
    let futureDate = new Date(selectedDate.setDate(selectedDate.getDate()+this.state.numberOfDays));
    futureDate = futureDate.getFullYear() + '-' + 
                (("0" + (futureDate.getMonth() + 1)).slice(-2)) + '-' + 
                ("0" + futureDate.getDate()).slice(-2);

    console.log(futureDate);
    this.setState({newDate: futureDate});
}; 

NumberOfDaysChangeHandler (event) {
    console.log("NumberChange: "+this.refs.numberOfDays.value);
    this.setState({numberOfDays: this.refs.numberOfDays.value});
}


constructor(){
    super();
    this.DateCalcHandler = this.DateCalcHandler.bind(this);
    this.NumberOfDaysChangeHandler = this.NumberOfDaysChangeHandler.bind(this);
    let dt = new Date();

    let today = dt.getFullYear() + '-' + 
                (("0" + (dt.getMonth() + 1)).slice(-2)) + '-' + 
                ("0" + dt.getDate()).slice(-2);


    this.state = {
        date: today,
        newDate: '',
        numberOfDays: 0
    };
}

render(){
    return(
        <div>
            <input type="date" ref="date" name="date" onChange ={this.DateCalcHandler }/>
            <input type="number" 
                ref="numberOfDays" name="numberOfDays" 
                value = { this.state.numberOfDays } 
                onChange = { this.NumberOfDaysChangeHandler } 
                placeholder="Enter Number Of Days..."/>
            <input type="date" ref="newDate" name="newDate" value = { this.state.newDate }/>
        </div>  
    )

}

导出默认的日期计算器；

如果我编写了任何不是最佳实践的代码，请随时纠正我。

Answer 1

在您的 NumberOfDaysChangeHandler 中，您还应该更改 numberOfDays 值并设置您的状态。我建议将您的计算转移到另一种方法，并在天数和日期发生变化时触发它。