Форма onSubmit = {handleSubmit} запускается через любую кнопку, которая имеет тип = «отправить» или не указана, или после ввода в текстовое поле

Question

Я пытаюсь получить отправителя / вызывающего абонента <form onClick={handleSubmit} /> В аргументе события я хотел бы проверить 'id' кнопки вызывающего абонента, например, <button id="submitter">Submit with id</button> и разрешить продолжить, только если 'id' совпадает.

Я пробовал Formik, Final-Form, Redux form, а также автономный тег <form>. Даже нажатие клавиши ввода на входном теге вызовет отправку формы. Я понимаю, что это поведение по умолчанию, но мне нужно ограничить, какой вызывающий разрешить продолжить.

Я должен использовать тег <form>, иначе что-то вроде прокрутки до ближайшей ошибки не работает. Попробовал с помощью Final Forms.

В моем приложении у меня есть много возможностей для добавления полей к удалению массива, и не у всех из них есть type = "button", которая предотвратит это. Но, как я сказал, даже ввод в текстовом поле вызовет это на SubSubmit, поэтому я должен найти лучшее решение.

Имейте в виду, что я не могу избежать использования тега <form>. Спасибо

https://codesandbox.io/s/dazzling-jackson-2m4r5

<form
      onSubmit={e => {
        e.persist();
        e.preventDefault();
        // HOW TO GET id="my-submit-button" HERE ???
        console.log(e);
        if(id==='my-submit-button') handleSubmit()
      }}
    >
      <input type="text" name="firstName" />

      <button>Button without type</button>
      <button type="button">Button type=button</button>
      <button type="submit">Button type=submit</button>
      <button id="my-submit-button">Button with id</button>
</form>

Answer 1

Как @epascarello упомянул это работает -> document.activeElement

Answer 2

Вы можете использовать событие при клике:

<form onSubmit={e => e.preventDefault()}>
  <input type="text" name="firstName" />
  <button>Button without type</button>
  <button type="button">Button type=button</button>
  <button type="submit">Button type=submit</button>
  <button id="my-submit-button" onClick={() => {
    console.log("Button click");
    // handleSubmit()
  }}>Button with id</button>
</form>