[英]Airbnb react-dates returns null
This is code that I implemented这是我实现的代码
<DayPickerRangeController
startDate={startDate}
startDateId="startDateId"
endDate={endDate}
endDateId="endDateId"
onDatesChange={(date) => console.log(date)}
focusedInput={focus}
onFocusChange={(focus) => console.log(focus)}
/>
But onDatesChange returns null但是 onDatesChange 返回 null
{startDate: null, endDate: null}
here are my hooks这是我的钩子
const [dateRange, setDateRange] = useState({
startDate: null,
endDate: null,
});
const [focus, setFocus] = useState(null);
const { startDate, endDate } = dateRange;
Any ideas why?任何想法为什么?
These are my imports这些是我的进口
import 'react-dates/initialize';
import { DayPickerRangeController } from 'react-dates';
here is full code这是完整的代码
import 'react-dates/initialize';
import { DayPickerRangeController } from 'react-dates';
const DatePicker = ({ name, items, handler }) => {
const [dateRange, setDateRange] = useState({
startDate: null,
endDate: null,
});
const [focus, setFocus] = useState(null);
const { startDate, endDate } = dateRange;
return (
<DayPickerRangeController
startDate={startDate}
startDateId="startDateId"
endDate={endDate}
endDateId="endDateId"
onDatesChange={(date) => console.log(date)}
focusedInput={focus}
onFocusChange={(focus) => console.log(focus)}
/>
)
}
I've tested it in codesandbox and it seems that onFocusChange
is not getting triggered once the focus
variable ends up being null.我已经在 codeandbox 中对其进行了测试,一旦
focus
变量最终为空,似乎onFocusChange
就不会被触发。
Use constants, as described in react-dates docs , not null
.使用常量,如 react-dates 文档中所述,而不是
null
。
const [focus, setFocus] = useState(START_DATE);
...
focusedInput={this.state.focusedInput} // PropTypes.oneOf([START_DATE, END_DATE]) or null,
START_DATE, END_DATE
constants can be easily imported:可以轻松导入
START_DATE, END_DATE
常量:
import { START_DATE, END_DATE } from 'react-dates/constants';
Ps: when you are done with selecting the range, focus
variable will be given null
value again. Ps:当您选择完范围后,
focus
变量将再次被赋予null
值。 In order to pick the values again, I guess it would be the best to reset all the values ( focus
, startDate
and endDate
)为了再次选择值,我想最好重置所有值(
focus
、 startDate
和endDate
)
Update:更新:
I've checked their implementation here .我在这里检查了它们的实现。 It's pretty straight forward:
这很简单:
onFocusChange={(f) => {
setFocus(!f ? START_DATE : f);
}}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.