Как повторно выполнить проверку при отправке в React Final Form

Question

Как только поля формы были проверены, отправка не запускает повторную проверку. Есть ли способ, которым я могу запустить повторную проверку при отправке формы?

У меня есть поле формы, значение которого может стать недействительным, если оно не отправлено в течение определенного периода времени. Это не асинхронно; Я просто пытаюсь описать сценарий, в котором пользователь не нажимает кнопку «Отправить» некоторое время, и когда он в конечном итоге делает это значение становится недействительным Окончательная форма запоминает результат проверки, которая происходит сразу после изменения значения, что означает, что неизменное значение остается действительным независимо от того, сколько времени проходит между проверкой и отправкой. Это поведение, которое я хочу подключить и изменить; прошедшее время имеет значение в моем случае использования. Я попытался использовать прослушиватель beforeSubmit из пакета final-form-submit-listener, но он только дает доступ к объекту FormApi. Я пытался использовать функции pauseValidation и resumeValidation из FormApi, но они не смогли добиться того, чего я хочу, или, может быть, я их не правильно использую. У меня такое чувство, что это мучительно очевидно, как это сделать, но я не могу этого понять. ?

Я создал эту Песочницу , чтобы продемонстрировать, что я имею в виду.

Спасибо!

ОБНОВЛЕНИЕ : Некоторая дополнительная информация:

• Это для выбора времени. Если вы выбираете время на сегодня, вы можете выбрать время, которое будет через 15 минут. Это действует сейчас, потому что это в настоящее время в будущем. Если вы не коснетесь формы в течение следующих 20 минут, а затем нажмите «Отправить», отправка должна быть запрещена, поскольку выбранное вами время уже прошло 5 минут.
• Я рассмотрел просто добавление проверки непосредственно в обработчик отправки. Два ответа здесь делают это. Однако, это не идеально для меня, потому что Final Form не получает ошибки и передает их объекту meta для полей формы. Моя кодовая база сложна и сильно зависит от объекта meta для отображения сообщений об ошибках. Попытка реплицировать эту функциональность в обработчике отправки может работать, но это хакерство и противоречит соглашению, используемому в кодовой базе.

Answer 1

Автор библиотеки здесь.Я всегда очарован новыми способами, которыми люди могут опровергнуть мои предположения.Я имею в виду, что искренне положительно, так как это приводит к обучению.

? Окончательная форма предполагает, что ваши валидационные функции являются «чистыми» или «идемпотентными» , т.е. всегда будут возвращатьсятот же результат, когда даны те же значения.Вот почему он не запускает синхронную проверку снова (просто для двойной проверки) перед тем, как разрешить отправку: потому что он уже сохранил результаты последнего запуска.Используя внешний таймер, вы опровергли это предположение.

Если у вас есть лучшее / более простое / "более официальное" решение, я все равно хотел бы увидеть его!

Нет необходимости в мутаторах или декораторах для этой проблемы.

Более официальный способ сделать это - запустить проверку (вы даже можете повторно использовать this.validate) в onSubmit.Единственная сложность заключается в том, что ошибка будет возвращаться как meta.submitError, поэтому вам нужно проверить наличие обоих при отображении вашей ошибки.Вот так:

Answer 2

Вы уже помещаете функцию в onSubmit, почему бы просто не добавить нужную вам функциональность?event.preventDefault(), а затем работайте с вашей функцией проверки, она является частью компонента и доступна для вас.

handleOnSubmit(e){
  let value = document.querySelector("input").value 
  if (!!this.validate(value)){
    e.preventDefault();
    alert("Prevented submit event")
  } else{
    alert("Form submitted")
  }
}

теперь просто используйте эту функцию в виде onSubmit prop (я вставил в бот, так какя не был уверен насчет структуры компонента):

<Form onSubmit={this.handleOnSubmit}>...</Form>
<form onSubmit={this.handleOnSubmit}>

И удалить декоратор submitListener из компонента Form:

decortaor={submitListener}

Теперь он проверитпроверка перед отправкой и предотвратить ее, если она не подтверждена.

Answer 3

Поскольку вы хотите принудительно провести повторную проверку ИЛИ прекратить отправку формы на основе interval, почему бы не использовать disabled для кнопки отправки?

// interval less than 900 = 15 minutes
<button type="submit" disabled={this.state.interval>=900}>
    Submit
</button>

Я также прочитал документы react-final-form, но я думаю, что это проще, если у вас нет конкретного случая для обращения с помощью meta.

Answer 4

Итак, я нашел способ сделать это!? Я использую мутатор и использую его функцию changeValue для «изменения» значения соответствующего поля (я предоставляю то же значение).Это в свою очередь уведомляет все соответствующие стороны об изменении состояния формы, и проверка запускается.Ключ заключается в том, чтобы вызвать мутатор внутри обработчика отправки, который гарантирует, что проверка выполняется при отправке формы.Взгляните на эту новую песочницу .

Соответствующие биты следующие:

// this is a stateful component
...
...
  mutateValue([name], state, { changeValue }) {
    // change the value to the same value, thus
    // triggering a revalidation of the same value
    changeValue(state, name, value => value);
  }

  handleSubmit(values) {
    alert("submitted");
  }

  render() {
    return (
  ...
  ...
        <Form
          onSubmit={this.handleSubmit}
          mutators={{ mutateValue: this.mutateValue }}
          render={({
            handleSubmit,
            form: {
              mutators: { mutateValue }
            }
          }) => {
            const mutateBeforeSubmit = values => {
              // supply the name of the relevant form field
              mutateValue("revalidate");
              // submit handler gets called if revalidation still passes
              handleSubmit(values);
            };
            return (
              <form onSubmit={mutateBeforeSubmit}>
              ...
              ...
              </form>
            );
          }}
        />
        ...
        ...

И поскольку он запускает тот же механизм проверки, meta используетсясоответственно!

Если у вас есть лучшее / более простое / "более официальное" решение, я все равно хотел бы увидеть его!