Пропуск валидации в React-Final-Form при нажатии кнопки «Отмена»

Question

У меня есть React-Final-Form, которая проверяет поля формы.

Я бы хотел не вызывать проверку при нажатии кнопки отмены или сброса. Однако если нажатие кнопки «Отмена» приводит к тому, что недопустимое поле отображает сообщение об ошибке, функция onCancel никогда не вызывается. Это происходит, даже если я установил тип кнопки на «сброс».

Если проверка не возвращает изменение, только тогда может быть достигнута функция onCancel .

  handleSubmit(values) { console.log(JSON.stringify(values, 0, 2)) }

  onCancel() { console.log("cancelled!"); }

  render() {
    const onSubmit = async values => { this.handleSubmit(values); };

   return (
     <Form name="form" 
        onSubmit={onSubmit}
        validate={values => {
                  const errors = {};
                  if (!values.username) { errors.username = 'Required' }
                  return errors }}

        render={({handleSubmit}) => (
          <form onSubmit={handleSubmit}>
            <Field name="username">
              {({ input, meta }) => (
                 <input {...input} type="text" placeholder="Username" autoFocus>
                 {meta.error && meta.touched && <span>{meta.error}/span>}                   
              )}
            </Field>

            <button type="submit">Submit</button>
            <button type="button" onClick={onCancel}>Cancel</button>
          </form>
        )}/>
  );

Answer 1

Ошибка отображается, потому что нажатие кнопки «Отмена» приводит к размытию поля, в результате чего meta.touched становится истинным. Это не «вызов проверки», ошибка уже вычислена.

Мне не имеет смысла, что onCancel не вызывается. Похоже, это происходит, когда я запускаю этот код.

Если вы хотите отменить, чтобы сбросить форму, вам нужно позвонить form.reset(). Как и в в этом примере .

Если вам нужно, чтобы ошибки не отображались, а не сбрасывал форму, вам нужно самостоятельно управлять этим состоянием.