Реакция - отправка формы запускает OnSubmit, прикрепленный к родителю формы

Question

Мне интересно, может ли кто-нибудь объяснить мне это поведение. У меня есть компонент React, состоящий из формы (React Bootstrap), обернутой в модал (React Bootstrap). Я случайно прикрепил onSubmit к окружающему модалу, и эта функция запускается при отправке формы. Я не ожидал, что функция запустится, но ожидал, что произойдет действие формы (URL-адрес Wufoo). Может кто-нибудь сказать мне, почему функция работает? Это вещь React? Нативная форма поведения? Немного и того, и другого?

Пример (ошарашен и убран React Bootstrap): JSFiddle

const MyForm = () => {

  const submitForm = (ev) => {
    ev.preventDefault();
    alert('submit');
  }

  return (
    <div onSubmit={submitForm}>
      <form>
        <input type="submit" value="Submit" />
      </form>
    </div>
  );
}

ReactDOM.render(<MyForm />, document.getElementById('root'));

Answer 1

onSubmit, который обычно перехватывается обработчиком отправки формы, просто всплывает через DOM.

Если вы присоедините e.stopPropagation к элементу <form>, вы увидите, что submitForm больше не называется.

Answer 2

в JS события могут bubble от внутреннего элемента к внешнему. я прикрепил ссылку в комментарии под вашим вопросом;)