全部...我正在使用“react-day-picker”组件通过两个输入选择日期范围。
我开始逐字使用此页面上的示例:http ://react-day-picker.js.org/examples/input-from-to 。我做的唯一改动是添加console.log(this.state)
了handleFromChange
andhandleToChange
方法。
乍一看,该组件似乎可以工作,但是当我 console.log 状态时,我发现只有在选择器中第二次选择“to”日期时才更新“to”状态。第一次选择“到”日期会返回“未定义”。
看看这段代码,有没有什么不正确的地方跳出来?同样,此代码由组件的创建者提供。我试图弄清楚它是组件的错误、示例代码的错误还是其他问题。
谢谢!
为方便起见,这是我正在使用的代码:
import React from 'react';
import moment from 'moment';
import Helmet from 'react-helmet';
import DayPickerInput from 'react-day-picker/DayPickerInput';
import 'react-day-picker/lib/style.css';
import { formatDate, parseDate } from 'react-day-picker/moment';
export default class Example extends React.Component {
constructor(props) {
super(props);
this.handleFromChange = this.handleFromChange.bind(this);
this.handleToChange = this.handleToChange.bind(this);
this.state = {
from: undefined,
to: undefined,
};
}
componentWillUnmount() {
clearTimeout(this.timeout);
}
focusTo() {
// Focus to `to` field. A timeout is required here because the overlays
// already set timeouts to work well with input fields
this.timeout = setTimeout(() => this.to.getInput().focus(), 0);
}
showFromMonth() {
const { from, to } = this.state;
if (!from) {
return;
}
if (moment(to).diff(moment(from), 'months') < 2) {
this.to.getDayPicker().showMonth(from);
}
}
handleFromChange(from) {
// Change the from date and focus the "to" input field
this.setState({ from }, () => {
if (!this.state.to) {
this.focusTo();
}
});
}
handleToChange(to) {
this.setState({ to }, this.showFromMonth);
}
render() {
const { from, to } = this.state;
const modifiers = { start: from, end: to };
return (
<div className="InputFromTo">
<DayPickerInput
value={from}
placeholder="From"
format="LL"
formatDate={formatDate}
parseDate={parseDate}
dayPickerProps={{
selectedDays: [from, { from, to }],
disabledDays: { after: to },
toMonth: to,
modifiers,
numberOfMonths: 2,
}}
onDayChange={this.handleFromChange}
/>{' '}
—{' '}
<span className="InputFromTo-to">
<DayPickerInput
ref={el => (this.to = el)}
value={to}
placeholder="To"
format="LL"
formatDate={formatDate}
parseDate={parseDate}
dayPickerProps={{
selectedDays: [from, { from, to }],
disabledDays: { before: from },
modifiers,
month: from,
fromMonth: from,
numberOfMonths: 2,
}}
onDayChange={this.handleToChange}
/>
</span>
<Helmet>
<style>{`
.InputFromTo .DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end):not(.DayPicker-Day--outside) {
background-color: #f0f8ff !important;
color: #4a90e2;
}
.InputFromTo .DayPicker-Day {
border-radius: 0 !important;
}
.InputFromTo .DayPicker-Day--start {
border-top-left-radius: 50% !important;
border-bottom-left-radius: 50% !important;
}
.InputFromTo .DayPicker-Day--end {
border-top-right-radius: 50% !important;
border-bottom-right-radius: 50% !important;
}
.InputFromTo .DayPickerInput-Overlay {
width: 550px;
}
.InputFromTo-to .DayPickerInput-Overlay {
margin-left: -198px;
}
`}</style>
</Helmet>
</div>
);
}
}