代码之家 › 专栏 › 技术社区 › user2024080

值更新时,表单验证不更新。但错误是正确的

react-forms reactjs

0

user2024080 · 技术社区 · 4 年前

我添加了一个表单验证。当字段中没有值时,它可以在提交时正常工作。如果我在提交时向表单字段添加了有效数据,则错误不会清除。无法理解这个问题。

这是我的代码:

const App = () => {
  const { values, onChangeHandler, onSubmitForm, errors } =
    FormValidator(ValueValidator);

  console.log('errors', errors);
  return (
    <div>
      <form
        name="contactform"
        className="contactform"
        autoComplete="off"
        onSubmit={onSubmitForm}
      >
        <label htmlFor="username" className={errors.username ? 'error' : ''}>
          <input
            id="username"
            name="username"
            autoComplete="off"
            onChange={onChangeHandler}
            value={values.username}
            placeholder="Name"
            type="text"
          />
        </label>
        <p>{errors.username && 'user name is required'}</p>
        <div>
          <label htmlFor="email" className={errors.email ? 'error' : ''}>
            <input
              placeholder="Email"
              autoComplete="off"
              onChange={onChangeHandler}
              value={values.email}
              type="email"
              name="email"
              id="email"
            />
          </label>
        </div>
        <label className="message" htmlFor="message">
          <textarea
            placeholder="Message"
            autoComplete="off"
            name="message"
            id="message"
          ></textarea>
        </label>
        <div>
          <button type="submit">Send</button>
        </div>
      </form>
    </div>
  );
};

Live Demo

0 回复 | 直到 4 年前

1

TomS 4 年前

出现此问题的原因是您的系统实际上没有重置

let errors = initialErrorsProps;

在valueValidator中。就像你想象的那样。

当你这么做的时候

errors.email = 'Email name required';

实际上,您正在更新的是对initialErrorsProps常量的引用。所以,当您在验证失败后重新提交时,您会看到错误已经被以前的值填充。

这是因为对象是通过引用传递的。详情如下: https://stackoverflow.com/a/13104500/7528450

一个简单的解决方案就是在方法的开头设置对象:

let errors = {
   username: '',
   email: '',
};