javascript - 在 React.js 中获取两个日期之间的天数差异

Question

我正在使用 react 中的日期选择器 并实现了开始和结束日期，效果很好。现在我需要得到两个日期之间的天数差异(开始日期和结束日期之间)。

问题来了。每次我选择这两个日期以获取天数差异时，它只显示初始化 0 天。我已经采取了解决方案here

但是，在日期选择元素上仍然显示 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

当 startDate 或 endDate 更新时，您必须调用 daysLeft 方法，这样它也会更新 天在状态。

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


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

为了更好的代码可读性，您可能希望将方法名称从 daysLeft 更改为更适合操作的名称，例如 calculateDaysLeft、getDaysLeft或者您能想到的更好的名称。

编辑:

这是另一个基于@Sulthan 评论的实现。

如果 days 的目的只是为了展示，那么您不需要将其存储在状态中。相反，您可以获得计算出的 days 在 render 方法本身中。

See working implementation here: 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>
    );
  }
}