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

Question

[SamPorter]

Здраствуйте, как сделать так чтобы при клике на submit пользователь переходил на на специальную страницу ошибок если он оставил инпуты пустыми?

Answer 1

[romazhan]

В качестве примера, у вас может быть форма с инпутами, которые обрабатываются в функции `handleSubmit`, которая вызывается при клике на кнопку `submit`. В функции `handleSubmit`, вы можете проверить, заполнены ли инпуты, и если нет, выполнить редирект на специальную страницу ошибок.

import { useHistory } from 'react-router-dom';

function handleSubmit(event) {
  event.preventDefault();

  // Получаем значения из инпутов
  const input1 = event.target.input1.value;
  const input2 = event.target.input2.value;

  // Проверяем, заполнены ли инпуты
  if (!input1 || !input2) {
    // Если нет, выполняем редирект на специальную страницу ошибок
    const history = useHistory();
    history.push('/error');
    return;
  }

  // Если инпуты заполнены...
}

render() {
    return (
        <form onSubmit={handleSubmit}>
            <input name="input1" />
            <input name="input2" />
            <button type="submit">Submit</button>
        </form>
    )
}

Comments

[SamPorter]

polak228 Спасибо за ответ, но я использую 6ю версию react-router dom, ничего не поменяется если я заменю useHistory на useNavigate?

[romazhan]

SamPorter, да, вы можете использовать хук `useNavigate` из библиотеки `react-router-dom` вместо хука `useHistory` в версии 6. Он работает так же, как и `useHistory`, но предназначен специально для работы с маршрутизатором `BrowserRouter` в версии 6.

[SamPorter]

polak228, то есть теперь чтобы она у меня работала, я должен указать path в route?

[SamPorter]

И ещё один вопрос, могу ли значения из инпут сохранить через useState вот так вот onChange={(e) => setInfo(e.target.value)} и проверять вот так if(!info) ?

[romazhan]

SamPorter, да, чтобы сделать редирект на специальную страницу ошибок в вашем приложении, вы должны указать путь (path) к этой странице в роуте (route). Это можно сделать с помощью компонента `Route` из библиотеки `react-router-dom`:

import { Route } from 'react-router-dom';

function App() {
  return (
    <div>
      {/* Другие роуты вашего приложения */}

      <Route path="/error" component={ErrorPage} />
    </div>
  );
}

[romazhan]

SamPorter, да, вы можете использовать хук `useState` для хранения значений инпутов в состоянии компонента.

import { useState } from 'react';

function handleSubmit(event) {
  event.preventDefault();

  // Получаем значения из состояния
  const { input1, input2 } = state;

  // Проверяем, заполнены ли инпуты
  if (!input1 || !input2) {
    // Если нет, выполняем редирект на специальную страницу ошибок
    const navigate = useNavigate();
    navigate('/error');
    return;
  }

  // Если инпуты заполнены, выполняем другие действия (например, отправку формы на сервер)
}

function render() {
  const [state, setState] = useState({
    input1: '',
    input2: ''
  });

  return (
    <form onSubmit={handleSubmit}>
      <input
        name="input1"
        value={state.input1}
        onChange={(e) => setState({ ...state, input1: e.target.value })}
      />
      <input
        name="input2"
        value={state.input2}
        onChange={(e) => setState({ ...state, input2: e.target.value })}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

[SamPorter]

polak228, Прошу прощения, мог и сам догадаться, сделал. Но есть последняя проблема, я не могу отправить форму при заполнении всех полей, по моему надо что-то написать в else но не знаю что, и ещё мне пришлось удалить после history слово push так как я получал ошибку что это не функция history.push('/error')
и после этого код начал работать, но правильно ли удалять push?

[romazhan]

После того, как вы проверили, что инпуты заполнены, вам нужно что-то сделать с формой. Например, вы можете отправить данные формы на сервер, или сделать редирект на другую страницу. Чтобы сделать это, вы можете использовать блок `else` (а можно и без него т.к. в `if` мы написали `return`) после условия `if (!input1 || !input2)`:

function handleSubmit(event) {
  event.preventDefault();

  // Получаем значения из состояния
  const { input1, input2 } = state;

  // Проверяем, заполнены ли инпуты
  if (!input1 || !input2) {
    // Если нет, выполняем редирект на специальную страницу ошибок
    const navigate = useNavigate();
    navigate('/error');
  } else {
    // Если инпуты заполнены, выполняем действия (например, отправку формы на сервер)
  }
}

Что касается удаления `history.push`, то это было нужно делать, так как функция `useNavigate` не содержит метода `push`. В последних версиях `react-router`, для редиректа используется функция `navigate`, которую вы можете получить с помощью хука `useNavigate`.

[SamPorter]

polak228, то есть push мне использовать уже необязательно? И как выполнить действие отправки формы?

[romazhan]

Если вы используете `useNavigate`, то push вызовет ошибку, так как `useNavigate` не содержит метода `push`.

[SamPorter]

polak228, а как отправить форму в else? Самый последний вопрос

[romazhan]

SamPorter, `event.target.submit()` (не забудьте указать адрес в атрибуте формы action), или функция `fetch`.