React应用中无法捕获form表单submit提交事件的问题求助

问题原因 #

• React 合成事件采用小驼峰命名规范，你代码中form标签绑定的onsubmit是小写原生事件名，不会被 React 识别为事件绑定，只会被当作普通自定义属性，所以提交时getSubmit函数完全不会被触发，点击按钮触发的是原生表单默认提交逻辑，表现就是页面刷新、标签页闪烁。
• 额外说明：即使事件名写对，React 合成事件体系中return false无法阻止默认行为，需要显式调用事件对象的preventDefault()方法才能阻止页面刷新。

修正后代码 #

import './App.css';
function App() {
  function getSubmit(e) {
    // 阻止原生表单默认提交行为
    e.preventDefault()
    alert('submit!')
  }
  return (
    <div className="App">
      <header className="App-header">
        <p>
          Test form submit capture.
        </p>
        {/* 事件名改为小驼峰onSubmit */}
        <form onSubmit={getSubmit}>
          Testing form submit <br />
          Click "submit": <br />
          <button type='submit'>
            Submit
          </button>
        </form>
      </header>
    </div>
  );
}
export default App;

修改点说明 #

• 将form标签的事件属性名从onsubmit改为onSubmit，符合React事件绑定规范
• 给getSubmit函数新增事件对象参数e，用e.preventDefault()替代原有的return false，正确阻止表单默认提交的页面刷新行为

内容的提问来源于stack exchange，提问作者MartinDuo