更改 DateTime 后,DatePicker 显示旧值(React、DatePicker)
After changed Date&Time, DatePicker showing old value (React, DatePicker)
我有 DatePicker
:
import DatePicker from 'react-datepicker';
const { state } = useLocation();
const [dateVisit, setDateVisit] = useState(new Date());
const editVist = async (e) => {
e.preventDefault();
console.log(dateVisit)
}
.....
<form onSubmit={(e) => editVist(e}>
<DatePicker
selected={dateVisit}
onChange={date => setDateVisit(date)}
value = {state.dataFiresStamp}
timeInputLabel="Time:"
dateFormat="MM/dd/yyyy h:mm aa"
showTimeInput
withPortal
/>
</form>
值设置和显示正确。
现在我正在改变Date&Time
。然后点击editVisit
。进入 console
显示更正后的新日期,但 value into DatePicker has been not changed
(仍然显示旧值)。
为什么不把 dateVisit
状态放在 DatePicker 的 value
属性中?
你应该可以把 state.dataFiresStamp
写成 defaultValue
<DatePicker
selected={dateVisit}
onChange={date => setDateVisit(date)}
value = {dateVisit} // changed here
defaultValue={state.dataFiresStamp} //added here
timeInputLabel="Time:"
dateFormat="MM/dd/yyyy h:mm aa"
showTimeInput
withPortal
/>
试试这个方法
const [dateVisit, setDateVisit] = useState(new Date());
const { state } = useLocation();
const setLocDate = () => {
// exception occurs when the Date object contains an invalid date. new Date('undefined').toISOString();
setDateVisit(state.dataFiresStamp);
}
useEffect(() => {
setLocDate();
});
<DatePicker
......
value={dateVisit} // change here
......
/>
我根据https://reactdatepicker.com/
做了什么:
const [dateVisit, setDateVisit] = useState();
const editVist = async (e) => {
e.preventDefault();
let updateDateVisit;
if (dateVisit === undefined) {
updateDateVisit = state.dataFiresStamp
} else {
updateDateVisit = dateVisit
}
}
...
<DatePicker
selected={dateVisit}
onChange={date => setDateVisit(date)}
placeholderText={state.dataFiresStamp} //display data
timeInputLabel="Czas:"
dateFormat="MM/dd/yyyy h:mm aa"
showTimeInput
withPortal
/>
我有 DatePicker
:
import DatePicker from 'react-datepicker';
const { state } = useLocation();
const [dateVisit, setDateVisit] = useState(new Date());
const editVist = async (e) => {
e.preventDefault();
console.log(dateVisit)
}
.....
<form onSubmit={(e) => editVist(e}>
<DatePicker
selected={dateVisit}
onChange={date => setDateVisit(date)}
value = {state.dataFiresStamp}
timeInputLabel="Time:"
dateFormat="MM/dd/yyyy h:mm aa"
showTimeInput
withPortal
/>
</form>
值设置和显示正确。
现在我正在改变Date&Time
。然后点击editVisit
。进入 console
显示更正后的新日期,但 value into DatePicker has been not changed
(仍然显示旧值)。
为什么不把 dateVisit
状态放在 DatePicker 的 value
属性中?
你应该可以把 state.dataFiresStamp
写成 defaultValue
<DatePicker
selected={dateVisit}
onChange={date => setDateVisit(date)}
value = {dateVisit} // changed here
defaultValue={state.dataFiresStamp} //added here
timeInputLabel="Time:"
dateFormat="MM/dd/yyyy h:mm aa"
showTimeInput
withPortal
/>
试试这个方法
const [dateVisit, setDateVisit] = useState(new Date());
const { state } = useLocation();
const setLocDate = () => {
// exception occurs when the Date object contains an invalid date. new Date('undefined').toISOString();
setDateVisit(state.dataFiresStamp);
}
useEffect(() => {
setLocDate();
});
<DatePicker
......
value={dateVisit} // change here
......
/>
我根据https://reactdatepicker.com/
做了什么:
const [dateVisit, setDateVisit] = useState();
const editVist = async (e) => {
e.preventDefault();
let updateDateVisit;
if (dateVisit === undefined) {
updateDateVisit = state.dataFiresStamp
} else {
updateDateVisit = dateVisit
}
}
...
<DatePicker
selected={dateVisit}
onChange={date => setDateVisit(date)}
placeholderText={state.dataFiresStamp} //display data
timeInputLabel="Czas:"
dateFormat="MM/dd/yyyy h:mm aa"
showTimeInput
withPortal
/>