Как я могу остановить переключение входных элементов с неконтролируемого на управляемое и наоборот с помощью реактивных ловушек? - PullRequest
Новая
       22

Как я могу остановить переключение входных элементов с неконтролируемого на управляемое и наоборот с помощью реактивных ловушек?

1 голос
/ 14 апреля 2020

Привет, ребята, у меня возникла небольшая проблема с проверкой формы с использованием реакционных хуков. Я получаю сообщение об ошибке всякий раз, когда нажимаю кнопку отправки, на которой написано

index. js: 1 Предупреждение. Компонент изменяет контролируемый ввод типа электронной почты на неконтролируемый. Входные элементы не должны переключаться с контролируемого на неуправляемый (или наоборот). Выберите между использованием управляемого или неконтролируемого входного элемента на весь срок службы компонента.

вот мой код. 

    const [formData, setFormData] = useState({
  email:'',
  password:'',
  emailError:'',
  passwordError:''
 }) 



 const handleEmailChange = e => setFormData({email: e.target.value})

 const handlePasswordChange = e => setFormData({password: e.target.value})

 //validate
 const validate = () => {
  let inputError = false
  const errors = {
   emailError:'',
   passwordError:''
  }
  if(!formData.email) {
   inputError = true
   errors.emailError = 'Please enter a valid email'
  } 
  else if(!formData.email.match(emailRegex)) 
  {
   inputError = true
   errors.emailError = (
    <span style={{color:'red'}}>Your email address must be valid</span>
   )
  }

  if(formData.password.length < 4){ 
   inputError = true
   errors.passwordError = 'Your password must contain more than 4 characters'
  }

  setFormData({
   ...errors
  })

  return inputError
 }

 const onSubmit = e => {
  e.preventDefault();

  const err = validate();

  if(!err){`
   setFormData(formData)
  }
 }

my JSX 

   <FormContainer>
   <div className="form-container">
    <form >
     <h1>Sign in</h1>
     <div className="input-container">
      <input className={formData.emailError ? 'input-error input-empty' : 'input-empty'}
       value={formData.email} 
       type="email"
        required
        onChange={e => handleEmailChange(e)}
        />
      <label>Email or Phone Number</label>
      <span style={{color: '#db7302'}}>{formData.emailError}</span>
     </div>
     <div className="input-container">
      <input 
      className={formData.passwordError ? 'input-error input-empty' : 'input-empty'}
       type="password" 
       value={formData.password} 
       required
       onChange={e => handlePasswordChange(e)}
       />
      <label>Password</label>
      <span style={{color: '#db7302'}}>{formData.passwordError}</span>
     </div>
     <div className="input-container">
      <Button href="/" onClick={e => onSubmit(e)} type="submit">Sign in</Button>
     </div>
     <label className="checkbox-container">
      Remember me
     <input type="checkbox" checked />
      <span className="checkmark"></span>
     </label>
     <Link to="/" className="need-help">Need Help?</Link>
     <div className="bottom-form">
      <img src={fbLogo} alt="" />
      <Link to="/" className="login-fb">
       Login with facebook
     </Link>
     <br/>
     <br/>
     <span style={{color:'#999'}}>New to netflix?</span>&nbsp;
     <Link to="/" className="signup-txt">Sign up now</Link>
     </div>
    </form>
   </div>
  </FormContainer>

1 Ответ

1 голос
/ 14 апреля 2020

Когда вы устанавливаете formData, вы не включаете все значения, поэтому вместо того, чтобы иметь email в качестве пустой строки, оно становится undefined, и React решает, что input не контролируется, если это значение undefined.

Чтобы предотвратить это, включите предыдущие значения формы при установке formData: 

setFormData(formData => ({
  ...formData,
  ...errors
}))
...