Блог

Я создал страницу регистрации и хочу, чтобы она выполняла некоторую проверку перед отправкой. Итак, я ввел event.preventDefault свою функцию handleSubmit. event.preventDefault заключается в предотвращении функции по умолчанию, поэтому, если форма пуста, она не будет отправлена. Но после того, как я заполню все пробелы, он может отправить. Мой вопрос все event.preventDefault еще находится в функции handleSubmit после заполнения пробелов, почему форма может быть отправлена? Или, если пользователь заполнит все пробелы, функция event.preventDefault будет отключена?

Спасибо!

 export default function RegisterPage() {
  const [values, setValues] = useState({
    userName: "",
    nickName: "",
    password: "",
  });

  const [errors, setErrors] = useState({});
  const [apiResError, setApiResError] = useState("");

  const handleSubmit = (e) => {
    setApiResError("");
    e.preventDefault();
    registerAccount(values.userName, values.nickName, values.password).then(
      (res) => {
        console.log(res);
      }
    );
  };

  const handleChange = (e) => {
    const { name, value } = e.target;
    setValues({
      ...values,
      [name]: value,
    });
  };

  const handleFocus = (e) => {
    const { name } = e.target;
    setErrors({ ...errors, [name]: "" });
  };

  return (
    <RegisterPageContainer>
      <RegisterPageTitle>Register</RegisterPageTitle>
      {apiResError amp;amp; <div>{apiResError}</div>}
      <RegisterForm onSubmit={handleSubmit}>
        <InputWrapper>
          <UserNameInput
            name="userName"
            type="text"
            placeholder="Username"
            onChange={handleChange}
            value={values.userName}
            onFocus={handleFocus}
          />
        </InputWrapper>
        {errors.userName amp;amp; <div>{errors.userName}</div>}
        <InputWrapper>
          <NickNameInput
            name="nickName"
            type="text"
            placeholder="Nickname"
            onChange={handleChange}
            value={values.nickName}
            onFocus={handleFocus}
          />
        </InputWrapper>
        {errors.nickName amp;amp; <div>{errors.nickName}</div>}
        <InputWrapper>
          <PasswordInput
            name="password"
            type="password"
            placeholder="Enter your password"
            onChange={handleChange}
            value={values.password}
            onFocus={handleFocus}
          />
        </InputWrapper>
        {errors.password amp;amp; <div>{errors.password}</div>}
        <SubmitBtn>Create An Account</SubmitBtn>
      </RegisterForm>
    </RegisterPageContainer>
  );
}
 

e.preventDefault() заключается в том, чтобы предотвратить выполнение http-вызова формой. Если вы не используете это при отправке формы, страница будет обновляться каждый раз, когда вы отправляете форму.

На самом деле это не имеет ничего общего с блокировкой отправки, когда значения пусты или что-то еще. Вы должны самостоятельно запрограммировать логику проверки.

Ваша registerAccount функция будет срабатывать каждый раз, когда вы нажимаете отправить. e.preventDefault() не блокирует его.