Question

似乎无法找出如何解决React Date而又不会每次都破坏

我有这个：

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)
}

，并将初始状态设置为null。但这给了我一个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>
  );
}

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

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

1 个答案: