在用antd开发时间选择器的时候,有一个需求是把表单的数据可以存到本地,下次进入的时候需要反显时间选择器的value
在遇到这个问题我第一时间想到用localStorage存到本地,然后下次进入的时候 把值赋给表单的各个属性就行了
别的都很顺利,就是时间选择器,刚开始我直接用 ISO 8601 格式存到本地 然后发现存进去的时候是个对象 ,从本地存储拿的时候就变成了两个字符串,回显失败!
然后我又想到先转成时间戳 存进去然后拿出来的拿出来的时候转成ISO 8601格式
const data = JSON.parse(localStorage.getItem('fire-form-params'))
if (data) {
const startTime = moment(new Date(data.date[0]))
const endTime = moment(new Date(data.date[1]))
let params = {
instruments: data.instruments,
confidence: [data.minConfidence, data.maxConfidence],
firePower: [data.minFirePower, data.maxFirePower],
date: [startTime,endTime],
};
setFormParams({
...params,
satellites: [],
feature: '',
});
console.log(params, "初始化表单参数");
结果反显成功了 但是 点击选择日期的时候会一直往下一年跳 死活调不好
最后是看antd官网里边用的dayjs时间格式进行反显
接着修改代码
const startTime = dayjs.unix(data.starTime)
const endTime = dayjs.unix(data.endTime)
console.log(data.starTime, "startTime")
let params = {
instruments: data.instruments,
confidence: [data.minConfidence, data.maxConfidence],
firePower: [data.minFirePower, data.maxFirePower],
date: data.startTime ? [] : [startTime, endTime],
satellites: data.satellites
};
然后就可以反显成功了 !!