Как повторно запустить проверку при отправке в окончательной форме React

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

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

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

Для этой задачи не нужны мутаторы или декораторы.

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

Вы уже помещаете функцию внутрь 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 из компонента формы:

decortaor={submitListener}

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

Итак, я нашел способ сделать это! ???? Я использую мутатор и использую его 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 используется соответственно!

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

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

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

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

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

Мы применили @ uche-ozoemena, и он работал нормально, но @ erik-r считается ли это решение взломом или мы можем использовать его в качестве одобренного обходного пути в сценариях, где нам нужно вручную запускать проверки?

Получилось что-то вроде (с использованием fonk-final-form):

  React.useEffect(() => {
    if (isUserCreation) {
      const newDataFormvalidationSchema = {
        ...dataFormvalidationSchema,
        field: {
          ...dataFormvalidationSchema.field,
          temporaryInitialPassword: [
            ...dataFormvalidationSchema.field.temporaryInitialPassword,
            Validators.required,
          ],
        },
      };

      dataFormValidation.updateValidationSchema(newDataFormvalidationSchema);
    }
  }, [isUserCreation]);

  return (
    <Form
      initialValues={initialData}
      mutators={{ mutateValue: mutateValue }}
      onSubmit={values => {
        save(values);
      }}
      validate={dataFormValidation.validateForm}