React-表单在附件的父表单上提交on onSubmit时触发

Question

我想知道是否有人可以向我解释这种行为。我有一个React组件，该组件由包装在Modal（React Bootstrap）中的Form（React Bootstrap）组成。我不小心将onSubmit附加到了周围的Modal上，并且在提交表单时触发了该函数。我没想到函数会运行，但是希望表单动作发生（一个Wufoo URL）。谁能告诉我该功能为什么运行？这是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

在JS事件中，可以bubble从内部元素到外部元素。我在您的问题下方的评论中附加了一个链接；）

Answer 2

onSubmit通常由表单的提交处理程序捕获，只是通过DOM冒泡。

如果将e.stopPropagation附加到<form>元素，您将看到不再调用submitForm。