Кнопки типа отправки onClick переопределяет отправку формы для формы Formik

#reactjs #formik

Вопрос:

У меня есть простая форма, для которой у меня есть кнопка, которая отправляет ее за пределы формы, проблема в том, что, когда я добавляю дополнительные клики на ту же кнопку, она перестает активировать форму:

     <Formik
      initialValues={addDepartmentFormInitialValues}
      onSubmit={handleAddDepartment}
      validationSchema={addDepartmentFormValidationSchema}
    >
      <Form id={formId}>
        <Field type="text" id="name" name="name" />
        <ErrorMessage name="name" />
      </Form>
    </Formik>
    <Button type="submit" form={formId}>Done</Button>
 

Если я сохраню его в таком виде, он отправит форму, и все будет работать просто отлично, но если я это сделаю:

     <Button onClick={handleDone} type="submit" form={formId}>Done</Button>
 

Затем он запускает handleDone функцию, но больше не отправляет форму (это означает, что onSubmit={handleAddDepartment} она не будет уволена без дополнительных onClick действий!).