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

问题描述

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

例如： 我将在输入字段中输入：“ [e-mail]”，并希望将其全部删除以重写它。我可以将它们全部退格，直到出现最后一个字符为止。因此，输入字段现在为：“ s”。

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

我已经删除了所有其他代码，以期希望能清楚地了解正在发生的事情。如果我缺少什么，请告诉我。

下面的const不仅具有这些对象，而且对于这个问题，它并不重要。 ：

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

useEffect验证电子邮件是否具有正确的字符

    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,email: false }));
            }
        }
    },[account.createEmail,validation.email,translated.errorMail]);

handleChange：

        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>

谁能告诉我为什么它如此工作？预先感谢！

解决方法

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

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

这说明了为什么内部状态不会更新并且输入字段无法反映任何更改的原因。

,

在handleChange中，当value === ''要将验证更新为false时，但是没有用新值（“”）更新输入的值。因此您仍然拥有最后一个先前的值，即“ s”。

因此，您应该仅将if 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,value } = e.target;
    if (name === 'createEmail') {
      setAccount(prevState => ({ ...prevState,[name]: value }));
      setValidation(prevState => ({ ...prevState,email: !value ? false: "active"}));

    }
}