React - 表单提交触发 onSubmit 附加到表单的父级

Question

我想知道是否有人可以向我解释这种行为。我有一个 React 组件，它由一个 Form (React Bootstrap) 包裹在一个 Modal (React Bootstrap) 中组成。我不小心将 onSubmit 附加到周围的模态，并且在提交表单时会触发该函数。我没想到函数会运行，但期望表单操作会发生（Wufoo URL）。有人能告诉我为什么函数运行s 吗？它是 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 从内部元素到外部元素。我在你的问题下面的评论中附上了 link ;)

Answer 2

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

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

React - 表单提交触发 onSubmit 附加到表单的父级

React - Form submit fires onSubmit attached to parent of the form

javascript

reactjs

forms

onsubmit