React js根据日期输入计算日期

Question

我花了一整天的时间来编写这个函数。我有一个react应用程序，我正在构建一个PERN堆栈。我有一个有很多日期输入的表单。我有两个日期列，然后是一个总天数列。我正在尝试获取用户输入，然后显示以天为单位的差异。

这是dateForm.js组件

import React, { useState } from 'react'

const DatesForm = () => {

     const [preliminaryStart, preliminaryEnd] = useState();
     const [preliminaryEnd, setFcbcToWitEnd] = useState();

     const diffDays = (s, e) => {
         if(s !== null) {
            start = new Date(s.value);
            end = new Date(e.value);
         return ((end - start) / (1000 * 60 * 60 * 24));
         }
         return '0';
     }

return (
    <>
        <div className="form-container">
            <form action="">
                <h1>Dates</h1>                
                <div className="row-nb">
                {/* Row 2 Column 1 */}
                    <h3 className="form-title-headers">PRELIMINARY REVIEW TIME</h3>
                    <div className="nbcol-3">
                        <div className="form-group">
                            <label htmlFor="preliminary-review-start">START</label>
                            <input type="date" className="form-control" id="preliminary-review-start"/>
                        </div>
                    </div>
                    {/* Row 2 Column 2 */}
                    <div className="nbcol-3">
                        <div className="form-group">
                            <label htmlFor="preliminary-review-end">END</label>
                            <input type="date" className="form-control" id="preliminary-review-end"/>
                        </div>
                    </div>
                    {/* Row 2 Column 3 */}
                    <div className="nbcol-3">
                        <div className="form-group">
                            <label htmlFor="total-time">TOTAL TIME IN STAGE</label>
                            <p className="total-time" id="preliminary-review-total">{diffDays(preliminaryStart, preliminaryEnd)}</p>
                        </div>
                    </div>
                </div>
    </>

Answer 1

您正在声明状态，但从不更改它们，这意味着您的状态从一开始就是未定义的，并且无论用户输入是什么，您的状态都不会更改。另外，您的状态声明也是错误的。还有其他的错误，你可能应该复习一下js和react的基础知识。但不管怎样，这里的代码应该是有效的。

​

import React, { useState, useEffect } from "react";

const DatesForm = () => {
  const [preliminaryEnd, setPreliminaryEnd] = useState(null);
  const [preliminaryStart, setPreliminaryStart] = useState(null);
  const [timeDiff, setTimeDiff] = useState(0);

  useEffect(() => {
    if (preliminaryEnd !== null && preliminaryStart !== null) {
      let start = new Date(preliminaryEnd);
      let end = new Date(preliminaryStart);
      setTimeDiff((end - start) / (1000 * 60 * 60 * 24));
    }
  }, [preliminaryEnd, preliminaryStart]);
  return (
    <>
      <div className="form-container">
        <form action="">
          <h1>Dates</h1>
          <div className="row-nb">
            {/* Row 2 Column 1 */}
            <h3 className="form-title-headers">PRELIMINARY REVIEW TIME</h3>
            <div className="nbcol-3">
              <div className="form-group">
                <label htmlFor="preliminary-review-start">START</label>
                <input
                  type="date"
                  className="form-control"
                  id="preliminary-review-start"
                  onChange={(e) => setPreliminaryStart(e.target.value)}
                />
              </div>
            </div>
            {/* Row 2 Column 2 */}
            <div className="nbcol-3">
              <div className="form-group">
                <label htmlFor="preliminary-review-end">END</label>
                <input
                  type="date"
                  className="form-control"
                  id="preliminary-review-end"
                  onChange={(e) => setPreliminaryEnd(e.target.value)}
                />
              </div>
            </div>
            {/* Row 2 Column 3 */}
            <div className="nbcol-3">
              <div className="form-group">
                <label htmlFor="total-time">TOTAL TIME IN STAGE</label>
                <p className="total-time" id="preliminary-review-total">
                  {timeDiff}
                </p>
              </div>
            </div>
          </div>
        </form>
      </div>
    </>
  );
};

​

这里的沙箱：https://codesandbox.io/s/react-fix-83jw6?file=/src/index.js。