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

Question

花了一天的大部分时间来编写这个函数。我有一个反应应用程序，我正在构建一个 PRN 堆栈。我有一个包含许多日期输入的表单。我有两个日期列，然后是总天数列。我正在尝试获取用户输入，然后显示天数的差异。

这是 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>
    </>

标签： javascriptreactjs

Answer 1

您正在声明状态但从未更改它们，这意味着您的状态从一开始就未定义并且无论用户输入是什么都不会改变。你的状态声明也是错误的。还有其他错误，您可能应该复习 js 的基础知识并做出反应。但无论如何，这里的代码应该可以工作。

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 。