如何解决使用钩子通过 react-datepicker 存储状态
我正在尝试将日历 (react-datepicker) 组件上的开始日期和结束日期的输入值呈现到列表中。目前,我可以记录当前值,但需要找出一种方法来存储状态中的开始和结束值。我确定这是一个简单的修复,但我无法弄清楚。任何帮助将不胜感激!
const Calendar = () => {
const [startDate,setStartDate] = useState(null);
const [endDate,setEndDate] = useState(null);
return (
<>
<DatePicker
placeholderText="Start"
showTimeSelect = {true}
isClearable={true}
selected={startDate}
onChange={date => setStartDate(date)}
selectsStart
startDate={startDate}
endDate={endDate}
/>
<DatePicker
placeholderText="End"
showTimeSelect = {true}
isClearable={true}
selected={endDate}
onChange={date => setEndDate(date)}
selectsEnd
startDate={startDate}
endDate={endDate}
/>
<div>Start date={startDate ? startDate.toString() : null}</div>
<div>End date={endDate ? endDate.toString() : null}</div>
</>
);
};
解决方法
您已经正确设置了状态。但是,状态中存储的值是对象类型,因此需要对其进行转换才能正确呈现。 你可以这样做:
<div>Start date={startDate ? JSON.stringify(startDate) : null} </div>
这将为您提供 UTC 日期和时间
或者您也可以使用名为 moment.js https://momentjs.com/ 的库,您可以使用它来将对象转换为您想要的格式。首先安装它:“npm i moment”,然后是这样的:
import moment from "moment";
<div>Start date={startDate ? moment(startDate).format("YYYY-MM-DD HH:mm:ss") : null} </div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。