无法在 React 应用程序中捕获表单的提交事件

Question

这是我的问题的演示。这是从运行 CRA 创建的新应用程序，仅将 App.js 代码更改为：

import './App.css';
function App() {
  function getSubmit() {
    alert('submit!')
    return false
  }
  return (
    <div className="App">
      <header className="App-header">
        <p>
          Test form submit capture.
        </p
        <form onsubmit={getSubmit}>
          Testing form submit <br />
          Click "submit": <br />
          <button type='submit'>
            Submit
          </button>
        </form>
      </header>
    </div >
  );
}
export default App;

它编译并运行但没有调用函数“getSubmit”。运行在调试模式下，设置的断点没有命中。当我单击“提交”时，window 选项卡闪烁，但我无法阅读上面的内容。

这个 package.json 如果有帮助的话：

{
  "name": "formsubmit",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Answer 1

您实际上必须阻止提交事件的默认行为，而且必须是 onSubmit，而不是 onsubmit。试试这个：

import './App.css';
function App() {
  function getSubmit(e) {
    e.preventDefault();
    alert('submit!');
    return false;
  }
  return (
    <div className="App">
      <header className="App-header">
        <p>
          Test form submit capture.
        </p
        <form onSubmit={getSubmit}>
          Testing form submit <br />
          Click "submit": <br />
          <button type='submit'>
            Submit
          </button>
        </form>
      </header>
    </div >
  );
}
export default App;

Answer 2

之所以可行，是因为当您提交表单时，它会默认重新加载，因此请防止出现以下默认情况：

function getSubmit(event) {
  event.preventDefault();
  alert('submit!')
  return false
}

Answer 3

您在其中一个 p 标签上遗漏了结束符“>”，但假设这只是一个复制错误，我认为您真正的问题是：

<form onsubmit={getSubmit}>

onsubmit对javascript没有任何意义，你需要onSubmit

此外，您可能希望将一个事件传递给您的提交处理程序并阻止刷新页面的默认提交行为，以便您可以查看调试器中发生的情况。

  function getSubmit(event) {
    event.preventDefault()
    alert('submit!')
    return false
  }

无法在 React 应用程序中捕获表单的提交事件

Can't capture the form's submit event in a React app

javascript

form-submit

reactjs