@Richswitch
junior

Как проверить дублирование добавления на клиенте в React?

Привет!
У меня есть 2 поля email и name и кнопка submit.
После нажатия на кнопку форма сабмитится и срабатывает такой код
validate(state, form) {
    // сначала валидируем 
     ...
    return this.request(form);
  }
  request(form) {
    // затем отправляем запрос
    ...
   return fetch(...)
  }

  handleSubmit(e) {
    e.preventDefault();

    return this.validate(this.state.emailData, e.target);
  }


Сейчас запросы отправляются при каждом нажатии на кнопку. Я хочу провалидировать форму после нажатия submit например как в методе componentDidUpdate который вернет мне предыдущие props (который я не использую потому что этот метод срабатывает при каждом изменении состояния и в моем классе присутствует onChange который и меняет это состояние при вводе текста в input).
Как реализовать такое же поведение что и в componentDidUpdate, но только после нажатия на кнопку submit?
  • Вопрос задан
  • 63 просмотра
Решения вопроса 2
yanis_kondakov
@yanis_kondakov
state: { hadSubmitted: false, };

componentDidUpdate(prevProps, prevState) {
    const { hadSubmitted } = this.state;

    if (hadSubmitted) {
        //...validate
    }
}

handleSubmit(e) {
    ...
    this.setState({
       hadSubmitted:  true,
    });
}

validate(state, form) {
    ...
    this.setState({ hadSubmitted: false, })
}
Ответ написан
maxfarseer
@maxfarseer
https://maxpfrontend.ru, обучаю реакту и компании
Мне кажется в задаче немного неверный порядок. Обычное решение следующее:

Кнопке submit делаем атрибут disabled, который проставляется в результате работы функции validate. Внутри validate проверяем - валидная форма или нет. Если валидная - disabled=false и юзер может отправить форму, итого имеем "досерверную валидацию". Затем, если пришла с сервера ошибка - показываем ее и снова ставим disabled=true, до тех пор, пока не будет изменений.

valiadte = () => {
  if (форма не валидная) {
    return false
  }
  return true
}
render() {
<form> ...
<button disabled={this.validate()}> отправить </button>
}
...


Главное в том, что вы вызываете this.validate() внутри метода render, а это значит, что на каждое изменение state (ваших данных формы), будет перерендер и следовательно вызов validate. То есть, всегда актуальное состояние.

> Я хочу провалидировать форму после нажатия submit
Зачем? лучше сразу запрещать отправлять форму, если она не валидная. Так и для UI понятнее, и вам код организовать проще будет.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы