无法从输入反应中删除值字符

Question

>我似乎无法删除我输入的值的最后一个字符。

例如：我将输入输入字段："[e-mail]"，并想将其全部删除以重写它。我可以毫无问题地退格所有这些，直到我到达最后一个字符。所以输入字段现在有："s"。

附言我在我自己编写的验证之上使用 react-bootstrap 验证。当我在handleChange中编写值字段的条件为空时，这个问题就开始了。

我已经删除了所有其他代码，希望有助于清楚地了解正在发生的事情。如果我遗漏了什么，请告诉我。

下面的 const 不仅仅包含这些对象，但对于这个问题来说，它无关紧要。

const [validation, setValidation] = useState({email: "notActive"}); 
const [messages, setMessages] = useState({ errormessageEmail: '' });
const [account, setAccount] = useState({ createEmail: ""});

使用效果来验证电子邮件是否具有正确的字符

useEffect(() => {
if (validation.email === "active") {
let err = '';
const emailRegex = new RegExp("[^\.\s@:](?:[^\s@:]*[^\s@:\.])?@[^\.\s@]+(?:\.[^\.\s@]+)+(?:\.[^\.\s@]+)*");
if (emailRegex.test(account.createEmail)) {
err = false;
setMessages(prevState => ({ ...prevState, errormessageEmail: err }))
setValidation(prevState => ({ ...prevState, email: true }));
} else {
err = <div className="text-start">{translated.errorMail}</div>
setMessages(prevState => ({ ...prevState, errormessageEmail: err }))
setValidation(prevState => ({ ...prevState, email: false }));
}
}
}, [account.createEmail, validation.email, translated.errorMail]);

句柄更改：

const handleChange = (e, i) => {
const { name, value, type } = e.target;
if (name === 'createEmail') {
if (value === '') {
setValidation(prevState => ({ ...prevState, email: false }));
} else {
setAccount(prevState => ({ ...prevState, [name]: value }));
setValidation(prevState => ({ ...prevState, email: "active" }));
}
}
}

输入字段：

<Form.Group as={Row}>
<Form.Control
name="createEmail"
type="email"
className={validation.email === true ? "form-control is-valid" : validation.email === false || validation.email === "active" ? "form-control is-invalid" : null}
placeholder={props.t('login:CreateEmail')}
value={account.createEmail}
onChange={(e) => handleChange(e)}
required />
{messages.errormessageEmail ?
< Alert className="no-margin-bttm nav-button-full" variant="danger">{messages.errormessageEmail}</Alert>
: null}
</Form.Group>

谁能告诉我为什么它这样工作？提前感谢！

Answer 1

您的输入字段的值为account.createEmail。此值由useState使用空字符串初始化。以后可以使用方法setAccount进行更改。

但是，如果value === ''，则不会handleChange侦听器中调用此方法。

这就解释了为什么内部状态不会更新，输入字段无法反映任何更改。

Answer 2

看起来就像在handleChange中，当您value === ''将验证更新为 false，但您没有使用新值 (") 更新输入的值时。 所以你仍然有最后一个以前的值，即"s"。

因此，您应该将 then 的更新移动到 if 之外setAccount，以便始终更新输入的值。

喜欢这个

const handleChange = (e, i) => {
const { name, value} = e.target;
if (name === 'createEmail') {
setAccount(prevState => ({ ...prevState, [name]: value }));
if (value === '') {
setValidation(prevState => ({ ...prevState, email: false }));
} else {
setValidation(prevState => ({ ...prevState, email: "active" }));
}
}
}

甚至最好使用三元运算符而不是 if else

const handleChange = (e, i) => {
const { name, value } = e.target;
if (name === 'createEmail') {
setAccount(prevState => ({ ...prevState, [name]: value }));
setValidation(prevState => ({ ...prevState, email: !value ? false: "active"}));
}
}