Блог

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

 export function SignInForm({login}) {
  const [values, setValues] = useState({});
  const [error, setErrors] = useState({});

  const validate = (values) => {
    console.log(login)
    let errors = {}
    if (!values.email) {
      errors.email = "Email address is required";
    } else if (!/S @S .S /.test(values.email)) {
      errors.email = "Invalid email address";
    }
    if (!values.password) {
      errors.password = "Password is required";
    } else if (values.password.length < 2) {
      errors.password = "Password should be 2 or more characters";
    }

    if (!values.confirmPass) {
      errors.confirmPass = "This field is required";
    } else if (values.confirmPass !== values.password) {
      errors.confirmPass = "Passwords do not match";
    }
    return errors;
  }
  
  const handleChange = (event) => {
    event.persist();
    setValues(values => ({ ...values, [event.target.name]: event.target.value }));
  };

  const submitChange = (event) => {
    event.preventDefault();
    setErrors(validate(values))
  }
...
 

И следующее-возвращающийся JSX.

 <form className={classes.form} onSubmit={submitChange}>
            <TextField
              variant="outlined"
              margin="normal"
              required
              fullWidth
              id="email"
              label="Email Address"
              name="email"
              autoComplete="email"
              autoFocus
              value={values.email}
              onChange={handleChange}
              error={Boolean(error.email)}
              helperText={error.email}
            />
            <TextField
              ...
              value={values.password}
              onChange={handleChange}
              error={Boolean(error.password)}
              helperText={error.password}
            />
            {!login amp;amp; 
            <TextField
              ...
              value={values.confirmPass}
              onChange={handleChange}
              error={Boolean(error.confirmPass)}
              helperText={error.confirmPass}
             
            />}
 

Атрибуты «…» являются общими для первого текстового поля, остальная часть формы не отображается, поскольку они не являются частью проблемы.

При запуске версии регистрации (login == false) поле подтверждения пароля остается на «Это поле обязательно», даже если я помещаю в него значения. Он не выполняет проверку. Но другие поля проверяются просто отлично.

Что я здесь делаю не так? И как я могу решить эту проблему? Любая зацепка будет оценена по достоинству. Спасибо.

Ответом для вас является фрагмент кода

 if(!login) {
  if (!values.confirmPass) {
    errors.confirmPass = "This field is required";
  } else if (values.confirmPass !== values.password) {
    errors.confirmPass = "Passwords do not match";
  } 
}
 

Существует еще одна проблема, связанная с тем, что вы должны установить начальное состояние своих компонентов

 const [values, setValues] = useState({
    confirmPass: null,
    password: null,
    email: null,
  });
  const [error, setErrors] = useState({
    confirmPass: null,
    password: null,
    email: null,
  });
 

У меня есть для вас хорошее предложение: попробуйте использовать что-то для управления вашими формами, как formik, и проверки схемы, как yup. Ваш код будет намного более понятным и простым в обслуживании

вы можете попробовать это

 if(!login) {
  if (!values.confirmPass) {
    errors.confirmPass = "This field is required";
  } else if (values.confirmPass !== values.password) {
    errors.confirmPass = "Passwords do not match";
  } 
} 

Так как при входе в систему значение false, values.confirmPass пусто.