我正在嘗試在兩個密碼狀態相等后更改錯誤狀態。但是當我輸入完密碼 onchange 不執行時，它需要再執行一次。
*關于使用 onkeyup 事件它有效，但我不知道它是否是一個好的做法。我也試過讓它成為一個超時功能，但它也沒有幫助
這是我的功能。
const [password, setPassword] = useState('')
const [password2, setPassword2] = useState('')
const [passError, setPerror] = useState(false)
const handleChange = (event) => {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
console.log(name " " value);
if(name == 'username') setUsername(value);
if(name == 'email') setEmail(value);
if(name == 'pass') setPassword(value);
if(name == 'pass2') setPassword2(value);
setTimeout(()=>checkPass(), 2000);
}
const checkPass = () => {
if (password != password2) setPerror(true);
else setPerror(false);
console.log(passError)
}
這是我的 html。
<input type="password" className="form-control" name="pass" placeholder="Password" required=""
value={password} onChange={handleChange} onKeyUp={handleChange} style={{marginBottom: 0}} />
<input type="password" className="form-control" name="pass2" placeholder="Confirm Password" required=""
value={password2} onChange={handleChange} />
{ passError && <p className='alert-danger'>Password does not match!</p>}
uj5u.com熱心網友回復：
問題
這里的問題是您正在嘗試參考尚未更新的狀態。實際上，您設定的超時時間無關緊要checkPass，未更新狀態的“實體”是在回呼范圍內排隊和關閉的內容。它永遠是回呼入隊時的狀態值。
解決方案
不要使用超時來檢查狀態更新后的狀態，而是使用useEffect依賴于密碼狀態值的鉤子來呼叫checkPass和進行驗證。類似地，將passError狀態記錄移動到一個useEffect鉤子上。
useEffect(() => {
checkPass();
}, [password, password2]);
useEffect(() => {
console.log(passError);
}, [passError]);
const handleChange = (event) => {
const { checked, name, type, value } = event.target;
const newValue = type === 'checkbox' ? checked : value;
if (name === 'username') setUsername(newValue);
if (name === 'email') setEmail(newValue);
if (name === 'pass') setPassword(newValue);
if (name === 'pass2') setPassword2(newValue);
}
const checkPass = () => setPerror(password !== password2);
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/360412.html
下一篇：OpenFileDialog在顯示瀏覽對話框之前拋出System.IO.FileNotFoundException