Reactjs Hook onChange with react-datepicker,无效时间值错误
Reactjs Hook onChange with react-datepicker, invalid time value error
我是 React 钩子的新手,我尝试将 react-datepicker 从 class 转换为使用钩子运行。
问题是当我触发 onChange 时将显示(RangeError:无效时间值),但默认 "selected" 开始日期呈现正常。这可以用钩子来完成吗?
import React, { useState, Fragment } from 'react';
import Datepicker from 'react-datepicker';
const Example = () => {
const [startDate, setStartDate] = useState(new Date());
const handleChange = date => {
setStartDate({ startDate: date });
}
return (
<Fragment>
<Datepicker
selected={startDate}
onChange={handleChange}
/>
</Fragment>
)
}
export default Example;
我希望在没有 "RangeError: Invalid time value" 的情况下更改 startDate 状态。
问题是您没有向状态中插入日期,而是向对象中插入。
变化:
setStartDate({ startDate: date });
至:
setStartDate(date);
我在我的项目中将其作为可重用组件使用
return (
<DatePicker
fixedHeight
showFullMonthYearPicker
showDisabledMonthNavigation
selected={selectedDate}
value={valueDate}
onChange={(day) => onChange && onChange(day, flag)}
className="react-datepicker__input-container-days"
/>
);
};
这是我调用我的组件的地方
{renderDateDay({
flag: 0,
valueDate: manuFucturedValue.day,
selectedDate:
(manuFucturedValue.day &&
new Date(manuFucturedValue.day)) ||
null,
onChange: (day) =>
handleDateOnchange(day, "day", 0),
我是 React 钩子的新手,我尝试将 react-datepicker 从 class 转换为使用钩子运行。 问题是当我触发 onChange 时将显示(RangeError:无效时间值),但默认 "selected" 开始日期呈现正常。这可以用钩子来完成吗?
import React, { useState, Fragment } from 'react';
import Datepicker from 'react-datepicker';
const Example = () => {
const [startDate, setStartDate] = useState(new Date());
const handleChange = date => {
setStartDate({ startDate: date });
}
return (
<Fragment>
<Datepicker
selected={startDate}
onChange={handleChange}
/>
</Fragment>
)
}
export default Example;
我希望在没有 "RangeError: Invalid time value" 的情况下更改 startDate 状态。
问题是您没有向状态中插入日期,而是向对象中插入。
变化:
setStartDate({ startDate: date });
至:
setStartDate(date);
我在我的项目中将其作为可重用组件使用
return (
<DatePicker
fixedHeight
showFullMonthYearPicker
showDisabledMonthNavigation
selected={selectedDate}
value={valueDate}
onChange={(day) => onChange && onChange(day, flag)}
className="react-datepicker__input-container-days"
/>
);
};
这是我调用我的组件的地方
{renderDateDay({
flag: 0,
valueDate: manuFucturedValue.day,
selectedDate:
(manuFucturedValue.day &&
new Date(manuFucturedValue.day)) ||
null,
onChange: (day) =>
handleDateOnchange(day, "day", 0),