Question

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

我做了很多尝试，但结果却变得非常不可预测，调试起来似乎很困难

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

}

}

导出默认的DateCalc;

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

Answer 1

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

React Component给我带来意想不到的结果

1 个答案: