为什么我的 React Dates 组件不工作？

Question

似乎无法弄清楚如何在每次不破坏不同内容的情况下修复 React Dates

我有这个：

const [startDate, setStartDate] = useState(moment().subtract(2, 'year'))
const [endDate, setEndDate] = useState(null)
const [focusedInput, setFocusedInput] = useState('startDate')



const onDatesChange = ({ startDate, endDate }) => {
    setStartDate(startDate)
    setEndDate(endDate)
}


<DateRangePicker
    endDate={endDate}
    endDateId="endDate"
    focusedInput={focusedInput.focusedInput}
    isOutsideRange={() => null}
    onDatesChange={onDatesChange}
    onFocusChange={(focusedInput) => setFocusedInput({ focusedInput })}
    startDate={startDate}
    startDateId="startDate"
/>

所以我得到的第一个错误是：Uncaught Error: Objects are not valid as a React child (found: object with keys {_isAMomentObject, _isUTC, _pf, _locale, _d, _isValid})

所以我尝试了很多这样的事情：

const onDatesChange = ({ startDate, endDate }) => {
    setStartDate(moment(startDate).format('DD-MM-YYYY')
    setEndDate(moment(endDate).format('DD-MM-YYYY)
}

并将初始状态设置为空。但那给了我一个 invalid date 错误

我只想在一个范围内设置 2 个不同的日期，这看起来非常复杂

Answer 1

我在 github 页面上找到了评论 github 您必须导入 react-dates/initialize

import React, { useState } from "react";
import "./styles.css";
import moment from "moment";
import "react-dates/initialize";
import { DateRangePicker } from "react-dates";
import "react-dates/lib/css/_datepicker.css";

export default function App() {
  const [startDate, setStartDate] = useState(moment().subtract(2, "year"));
  const [endDate, setEndDate] = useState(null);
  const [focusedInput, setFocusedInput] = useState("startDate");

  const onDatesChange = ({ startDate, endDate }) => {
    setStartDate(startDate);
    setEndDate(endDate);
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <DateRangePicker
        endDate={endDate}
        endDateId="endDate"
        focusedInput={focusedInput.focusedInput}
        isOutsideRange={() => null}
        onDatesChange={onDatesChange}
        onFocusChange={focusedInput => setFocusedInput({ focusedInput })}
        startDate={startDate}
        startDateId="startDate"
      />
      ;
    </div>
  );
}

也请参考此沙箱 link。 https://codesandbox.io/s/hidden-currying-9jydi?file=/src/App.js

为什么我的 React Dates 组件不工作？

Why is my React Dates component not working?

javascript

momentjs

reactjs

react-dates