使用钩子通过react-datepicker存储状态

Question

我尝试将calendar (react-datepicker)组件上的开始日期和结束日期的输入值呈现到一个列表中。目前，我可以记录当前值，但需要找到一种方法来存储状态中的起始值和结束值。我相信这是一个简单的解决方法，但我很难弄清楚。任何帮助都将不胜感激！

const Calendar = () => {
  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);

  return (
    <>
      <DatePicker
        placeholderText="Start"
        showTimeSelect = {true}
        isClearable={true}
        selected={startDate}
        onChange={date => setStartDate(date)}
        selectsStart
        startDate={startDate}
        endDate={endDate}
      />
      <DatePicker
        placeholderText="End"
        showTimeSelect = {true}
        isClearable={true}
        selected={endDate}
        onChange={date => setEndDate(date)}
        selectsEnd
        startDate={startDate}
        endDate={endDate}
      />

      <div>Start date={startDate ? startDate.toString() : null}</div>
      <div>End date={endDate ? endDate.toString() : null}</div>
    </>
  );
};

Answer 1

您已经正确地设置了状态。但是，存储在状态中的值是一种对象类型，因此需要对其进行转换才能正确呈现。你可以这样做：

<div>Start date={startDate ? JSON.stringify(startDate) : null} </div> 

这将为您提供UTC格式的日期和时间

或者，您也可以使用名为moment.js https://momentjs.com/的库，您可以使用该库将对象转换为所需的格式。首先安装它："npm i moment“，然后，类似这样：

import moment from "moment";

<div>Start date={startDate ? moment(startDate).format("YYYY-MM-DD HH:mm:ss") : null} </div>