无法从输入 reactjs 中删除值字符

Question

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

例如： 我将在输入字段中键入：“syEmail@mail.com”，并希望将其全部删除以重写它。我可以毫无问题地退格所有这些，直到我到达最后一个字符。所以输入字段现在有：“s”。

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

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

下面的 const 不仅有这些对象，但与这个问题无关。 :

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

使用 Effect 验证电子邮件是否包含正确的字符

    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 setAccount 的更新移到 if 之外，这样您就可以始终更新输入的值。

像这样

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"}));

    }
}

无法从输入 reactjs 中删除值字符

Unable to delete value character from input reactjs

user-input

input

erase

reactjs

react-bootstrap