在React.js中獲取兩個日期之間的天差

Question

我正在使用日期選擇器進行反應 ，並實現了正常的開始和結束日期。 現在我需要獲取兩個日期之間的天差（開始日期和結束日期之間）。

這是問題所在。 每次我選擇兩個日期以獲取天數差異時，它僅顯示初始化的0天。 我在這里求助於解決方案

但是，仍然顯示0天的日期選擇元素。 控制台上未顯示任何錯誤消息。

這是我的代碼

//install the following
//npm i --save react-datepicker
//npm i --save moment

import React from "react";
import DatePicker from "react-datepicker";

import "react-datepicker/dist/react-datepicker.css";


class CheckDate extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      startDate: new Date(),
      endDate: new Date(),
      days: 0,
    };
    this.handleChangeEnd = this.handleChangeEnd.bind(this);
    this.handleChangeStart = this.handleChangeStart.bind(this);
    this.daysLeft = this.daysLeft.bind(this);

  }

  handleChangeStart(date) {
    this.setState({
      startDate: date
    });
  }


 handleChangeEnd(date) {
    this.setState({
      endDate: date
    });
  }


daysLeft() {
    let {startDate, endDate} = this.state;
    console.log(startDate);
    console.log(endDate);
    let amount = endDate.diff(startDate, 'days');
    this.setState({
      days: amount
    });
  }



  render() {
    return (
     <div>
          <h3>Get Difference between two dates in days</h3>

<b>Start Date</b>:
 <DatePicker
   selected={this.state.startDate}
   onChange={this.handleChangeStart}
 />

&nbsp;&nbsp;&nbsp;

<b>End Date</b>:
 <DatePicker
   selected={this.state.endDate}
   onChange={this.handleChangeEnd}
 />

 <div className="amount">
   {this.state.days}
 </div>

</div>
    );
  }
}

Answer 1

你打電話給你的daysLeft方法時任中startDate或endDate被更新，以便它也將更新days的狀態。

 handleChangeStart(date) { this.setState({ startDate: date }, () => this.daysLeft()); } handleChangeEnd(date) { this.setState({ endDate: date }, () => this.daysLeft()); } 

為了提高代碼的可讀性，您可能需要將方法名從daysLeft為更適合該操作的名稱，例如calculateDaysLeft ， getDaysLeft或可以想到的更好的名稱。

編輯：

這是基於@Sulthan的評論的另一個實現。

如果days的目的只是為了表示，那么您無需將其存儲在狀態上。 相反，您可以在render方法本身內部獲取計算的days 。

在此處查看有效的實現方式： https ： //codesandbox.io/s/4w1496rp4

 import React from "react"; import ReactDOM from "react-dom"; import moment from "moment"; import DatePicker from "react-datepicker"; import "react-datepicker/dist/react-datepicker.css"; class CheckDate extends React.Component { constructor(props) { super(props); this.state = { startDate: new Date(), endDate: new Date() }; this.handleChangeEnd = this.handleChangeEnd.bind(this); this.handleChangeStart = this.handleChangeStart.bind(this); } handleChangeStart(date) { this.setState({ startDate: date }); } handleChangeEnd(date) { this.setState({ endDate: date }); } calculateDaysLeft(startDate, endDate) { if (!moment.isMoment(startDate)) startDate = moment(startDate); if (!moment.isMoment(endDate)) endDate = moment(endDate); return endDate.diff(startDate, "days"); } render() { const { startDate, endDate } = this.state; const daysLeft = this.calculateDaysLeft(startDate, endDate); return ( <div> <h3>Get Difference between two dates in days</h3> <b>Start Date</b>: <DatePicker selected={this.state.startDate} onChange={this.handleChangeStart} /> &nbsp;&nbsp;&nbsp; <b>End Date</b>: <DatePicker selected={this.state.endDate} onChange={this.handleChangeEnd} /> <div className="amount">{daysLeft}</div> </div> ); } }