強制輸入欄位有驗證。當這些欄位未填寫或填寫不正確時，驗證有效。填寫該欄位后，我將其洗掉，但驗證仍然有效，并彈出一條錯誤訊息。我不希望在洗掉輸入值時運行驗證。
我該如何解決？
js
const [nameValidationState, setNameValidationState] = useState({
error: false,
helperText: '',
});
const nameOnChange = (event) => {
if (nameValidator(event.target.value)) {
setNameValidationState({ error: false, helperText: '' });
setPaymentInfo({
...paymentInfo,
firstName: event.target.value,
});
} else {
setNameValidationState({ error: true, helperText: 'Please enter your name.' });
setPaymentInfo({
...paymentInfo,
firstName: null,
});
}
};
const handleInputChange = (event) => {
const { name, value } = event.target;
setPaymentInfo({ ...paymentInfo, [name]: value });
};
const handleFirstNameChange = (event) => {
nameOnChange(event);
handleInputChange(event);
};
html
<AS.TextField
id="outlined-basic"
label={t('general.name')}
variant="outlined"
sx={{ width: '100%', maxWidth: '500px', margin: 'auto' }}
InputLabelProps={{
shrink: true,
}}
placeholder=""
onChange={handleFirstNameChange}
error={nameValidationState.error}
helperText={nameValidationState.helperText}
name="firstName"
value={paymentInfo.firstName}
/>
<AS.TextField
驗證器.js
export const nameValidator = (name) => {
const nameRegex = /^[a-zA-Zw??ü????ü????] $/;
return nameRegex.test(name);
};
uj5u.com熱心網友回復：
像這樣更改nameOnChange方法將解決問題。
const nameOnChange = (event) => {
if (nameValidator(event.target.value)) {
setNameValidationState({ error: false, helperText: '' });
setPaymentInfo({
...paymentInfo,
firstName: event.target.value,
});
} else {
setNameValidationState({ error: true, helperText: 'Please enter your name.' });
setPaymentInfo({
...paymentInfo,
firstName: null,
});
}
if (event.target.value === '') {
setNameValidationState({ error: false, helperText: '' });
}
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/489836.html
標籤：javascript 反应 反应式