Question

为react-dates组件设置startDate和endDate的默认值会破坏该组件，并出现以下错误：

我的反应版本： “反应”：“ ^ 16.5.2” “反应日期”：“ ^ 18.1.0”

组件代码：

import React from 'react'

import 'react-dates/initialize';
import { DateRangePicker } from 'react-dates';
import 'react-dates/lib/css/_datepicker.css';

class DateRangeSelector extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      startDate: moment().subtract(2, 'year'),
      endDate: moment(),
      // focusedInput: 'startDate'
    }

  }

  render() {

    return (

      <DateRangePicker
        startDate={this.state.startDate} // momentPropTypes.momentObj or null,
        startDateId={this.props.startDateInputId} // PropTypes.string.isRequired,
        endDate={this.state.endDate} // momentPropTypes.momentObj or null,
        endDateId={this.props.endDateInputId} // PropTypes.string.isRequired,
        onDatesChange={({ startDate, endDate }) => this.setState({ startDate, endDate })}
        isOutsideRange={() => false}
        focusedInput={this.state.focusedInput} // PropTypes.oneOf([START_DATE, END_DATE]) or null,            
        onFocusChange={focusedInput => this.setState({ focusedInput })} // PropTypes.func.isRequired,
      />


    )

  }

}

DateRangeSelector.defaultProps = {
  startDateInputId: 'start-date-field',
  endDateInputId: 'end-date-field',
}

export default DateRangeSelector

错误：

DayPickerRangeController.js:1336 Uncaught TypeError: day.isBetween is not a function
    at DayPickerRangeController.isInSelectedSpan (DayPickerRangeController.js:1336)
    at Object.selectedSpan [as selected-span] (DayPickerRangeController.js:383)
    at DayPickerRangeController.js:1074
    at Array.filter (<anonymous>)
    at DayPickerRangeController.getModifiersForDay (DayPickerRangeController.js:1073)
    at DayPickerRangeController.js:1058
    at Array.forEach (<anonymous>)
    at DayPickerRangeController.js:1057
    at Array.forEach (<anonymous>)
    at DayPickerRangeController.getModifiers (DayPickerRangeController.js:1055)
isInSelectedSpan @ DayPickerRangeController.js:1336
selectedSpan @ DayPickerRangeController.js:383
(anonymous) @ DayPickerRangeController.js:1074
getModifiersForDay @ DayPickerRangeController.js:1073
(anonymous) @ DayPickerRangeController.js:1058
(anonymous) @ DayPickerRangeController.js:1057
getModifiers @ DayPickerRangeController.js:1055
getStateForNewMonth @ DayPickerRangeController.js:1099
DayPickerRangeController @ DayPickerRangeController.js:439
constructClassInstance @ react-dom.development.js:11769
updateClassComponent @ react-dom.development.js:13491
beginWork @ react-dom.development.js:14090
performUnitOfWork @ react-dom.development.js:16416
workLoop @ react-dom.development.js:16454
callCallback @ react-dom.development.js:145
invokeGuardedCallbackDev @ react-dom.development.js:195
invokeGuardedCallback @ react-dom.development.js:248
replayUnitOfWork @ react-dom.development.js:15745
renderRoot @ react-dom.development.js:16548
performWorkOnRoot @ react-dom.development.js:17387
performWork @ react-dom.development.js:17295
performSyncWork @ react-dom.development.js:17267
interactiveUpdates$1 @ react-dom.development.js:17558
interactiveUpdates @ react-dom.development.js:2208
dispatchInteractiveEvent @ react-dom.development.js:4913
react-dom.development.js:14550 The above error occurred in the <DayPickerRangeController> component:
    in DayPickerRangeController (created by DateRangePicker)
    in div (created by DateRangePicker)
    in div (created by OutsideClickHandler)
    in OutsideClickHandler (created by DateRangePicker)
    in div (created by DateRangePicker)
    in DateRangePicker (created by withStyles(DateRangePicker))
    in withStyles(DateRangePicker) (created by DateRangeSelector)
    in div (created by DateRangeSelector)
    in div (created by DateRangeSelector)
    in DateRangeSelector

Answer 1

我能够按照docs进行操作。尝试利用React state代替defaultProps。请注意，这里有一些CSS的问题-不确定是由于codeandbox还是模块。

此外，我也强烈建议将与this.setState()或粗箭头功能() => {}相关的所有内容移出render方法并移至类方法中。 Why? (see yellow note)

工作示例：https://codesandbox.io/s/8nq5k494k0

components / DateRangeSelector.js

import React, { Component } from "react";
import { DateRangePicker } from "react-dates";
import moment from "moment";

export default class DateRangeSelector extends Component {
  state = {
    startDate: moment().subtract(2, "year"),
    endDate: moment(),
    focusedInput: null
  };

  handleDateChange = ({ startDate, endDate }) =>
    this.setState({ startDate, endDate });

  handleFocusChange = focusedInput => this.setState({ focusedInput });

  isOutsideRange = () => false;

  render = () => (
    <DateRangePicker
       endDate={this.state.endDate}
       endDateId="endDate"
       focusedInput={this.state.focusedInput}
       isOutsideRange={this.isOutsideRange}
       onDatesChange={this.handleDateChange}
       onFocusChange={this.handleFocusChange}
       startDate={this.state.startDate}
       startDateId="startDate"
    />
  );
}

index.js

import React from "react";
import { render } from "react-dom";
import DateRangeSelector from "./components/DateRangeSelector";
import "react-dates/initialize";
import "react-dates/lib/css/_datepicker.css";
import "./styles.css";

const App = () => (
  <div className="App">
    <h2>Date Range Picker</h2>
    <DateRangeSelector />
  </div>
);

render(<App />, document.getElementById("root"));

styles.css

.App {
  font-family: sans-serif;
  text-align: center;
}

.DateRangePickerInput_arrow {
  width: 40px;
  text-align: center;
}

.DateInput {
  display: inline-flex !important;
}

.DateInput_input {
  cursor: pointer;
}

为反应日期设置默认的startDate和endDate属性

1 个答案: