reactjs - 为 react-dates 设置默认的 startDate 和 endDate 属性
问题描述
为 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
解决方案
I was able to follow the docs and got it to work. Try utilizing React state
instead of defaultProps
. Please note, that there's some CSS
jank going on with the module.
Working example:
components/DateRangeSelector/index.js
import React, { Component } from "react";
import { DateRangePicker } from "react-dates";
import moment from "moment";
import "./styles.css";
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 });
render = () => (
<DateRangePicker
endDate={this.state.endDate}
endDateId="endDate"
focusedInput={this.state.focusedInput}
isOutsideRange={() => null}
onDatesChange={this.handleDateChange}
onFocusChange={this.handleFocusChange}
startDate={this.state.startDate}
startDateId="startDate"
/>
);
}
export default DateRangeSelector;
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"));
components/DateRangeSelector/styles.css
.DateRangePickerInput_arrow {
width: 40px;
}
.DateInput_input {
cursor: pointer;
}
styles.css
.app {
font-family: sans-serif;
text-align: center;
}
* {
box-sizing: border-box;
}
推荐阅读
- sprite-kit - (Xcode,Spritekit)有没有办法在设计时用脚本添加精灵?
- c++ - 将 for 循环与嵌套的 while 循环并行化时出现 OpenMP 分段错误
- selenium - hello.myfonts.net 使用 Selenium WebDriver 加载需要很长时间
- vba - VBA防止在不保护工作表的情况下选择表格中的单元格/列(Excel 2016)
- soap - 如何在 magento2 中使用第 3 方 wsdl
- angular5 - 错误:已加载补丁:ZoneAwarePromise
- c# - 将 Windows 服务作为依赖项添加到 .Net 应用程序
- android - 突然 Android Wearable 不再显示通知?
- testing - 如何进行 RFID 标签阅读器的自动化测试?
- java - 与按需执行文件查找相比,什么时候在初始化时从文件中加载所有数据更好?(爪哇)