在React中提交表单之前如何调用confirm()？

Question

我的 React 项目中有一个表单。confirm()如果用户单击提交按钮，我想打电话。我尝试过这样的：

<form onSubmit="return confirm('Are you sure?')">...</form>

<button type="submit" onClick="return confirm('Are you sure?')">Submit</button>

<form onSubmit={()=>window.confirm('Are you sure?')}>...</form>

<button onClick={() => window.confirm("Are you sure")}>Submit</button>

不幸的是，没有任何反应，表单在没有警报的情况下提交。React 以某种方式删除了onClick和onSubmit。如何才能避免这种情况呢？

Answer 1

import React from "react";
import "./styles.css";

export default function App() {

  const handleSubmit = (e) => {
    e.preventDefault();
    const answer = window.confirm("are you sure?");
    if (answer) {
      // Save it!
      console.log("Thing was saved to the database.");
    } else {
      // Do nothing!
      console.log("Thing was not saved to the database.");
    }
  };
  return (
    <div className="App">
      <form onSubmit={handleSubmit}>
        ...
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

我相信您正在寻找javascript的确认方法

https://codesandbox.io/s/flamboyant-lake-hl5rb?file=/src/App.js