我第一次嘗試建立一個日期輸入。我的任務是，如果月或日被設定為個位數，則要確保輸入顯示一個前導0。我遇到的問題是，當一個值被輸入時，它不會進入下一個處理程式，直到我下次輸入一個欄位。我相信這是因為我通過狀態傳遞數值。但我不確定如何在用戶輸入欄位后立即發送狀態。
狀態：
const [date, setDate] = useState({ day: ""/span>, 月: "", 年: "" })。
我的日期輸入包括三個獨立的月/日/年的輸入，在這里只顯示月份：
<div className="nh-date"/span>>
<Input。
onChange={dateChange("month)}。
value={date.month}。
className={`nh-mon ${!!error && "error" }`}.
name="month"
id="mon"/span>
maxLength={2}
type="number"
selectTextOnFocus={true}。
/>
<span className="sep"/span>> /</span>
我的onChange處理程式看起來像這樣：
const dateChange = (field。string) => (e: any) => {
//format to fit
let value = e.target.value。
let d = { day: "", 月: "", 年: "" };
if (value.length < 2) {
value = "0"/span> value。
} else {
//洗掉多余的前導0。
value = value - 0;
}
setDate({ ...date, [field]: value }) 。
const newDate = `${date.month}/${date.day}/${date.year}。
if (moment（newDate）.isValid（）) {
debounceCallback（handleDateChange, newDate）。
setError(false)。
} else {
setError(true)。
}
};
一旦我在欄位中輸入debounceCallback(handleDateChange, newDate);就會收到newDate，但不是像目前顯示的那樣，它發送的是初始值或以前的值。我仍然在為處理狀態下的輸入而掙扎，我不確定如何解決這個問題，任何建議都會有幫助。謝謝你！
uj5u.com熱心網友回復：
在useEffect中，你的日期被更新了，你用新的日期呼叫回呼
。const dateChange = (field。string) => (e: any) => {
//format to fit
let value = e.target.value。
let d = { day: "", 月: "", 年: "" };
if (value.length < 2) {
value = "0"/span> value。
} else {
//洗掉多余的前導0。
value = value - 0;
}
setDate((prevState) =>/span> {
return { ... prevState, [field]: value };
});
}
useEffect(() => {
const newDate = `${date.month}/${date.day}/${date.year}`。
if (moment（newDate）.isValid（）) {
debounceCallback（handleDateChange, newDate）。
setError(false)。
} else {
setError(true)。
}
}, [date, //rest dependencies]);
uj5u.com熱心網友回復：
在React中呼叫setState()是異步的，出于各種原因（主要是性能）。React會將對setState()的多次呼叫批量化為一次狀態突變，然后對組件進行一次重新渲染，而不是對每一次狀態變化進行重新渲染。
我認為你得到的前值for Month
setDate({ ...date, [field]: value }); 不是立即更新狀態。
const dateChange = (field: string) => (e: any) => /span> {
//format to fit
let value = e.target.value。
let d = { day: "", 月: "", 年: "" };
if (value.length < 2) {
value = "0"/span> value。
} else {
//洗掉多余的前導0。
value = value - 0;
}
setDate({ ...date, [field]: value }) 。
const newDate = `${value}/${date.day}/${date.year}。
if (moment（newDate）.isValid（）) {
debounceCallback（handleDateChange, newDate）。
setError(false)。
} else {
setError(true)。
}
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/333297.html
標籤：