为什么我要把 e.preventDefault() 放在异步函数的开头？

Question

我仍在发展对异步函数和 ReactJS 的理解，但在表单提交的上下文中，为什么我可以使用

e.preventDefault()?

来启动我的异步函数

我看到这段代码是如何在 React 中发布表单数据的示例（请参阅文章link），但他们没有解释为什么他们的代码以

e.preventDefault()

开头。我不确定这是否与异步功能、React 如何渲染事物或任何其他我没有掌握的概念有关。

我认为

e.preventDefault()

会阻止表单提交，所以我正在阅读这段代码（它与表单元素的“onSubmit”属性绑定），因为“每当我提交表单时，提交都会自动取消”.

任何帮助将不胜感激，谢谢。

let handleSubmit = async (e) => {
    e.preventDefault();
    try {
      let res = await fetch("https://httpbin.org/post", {
        method: "POST",
        body: JSON.stringify({
          name: name,
          email: email,
          mobileNumber: mobileNumber,
        }),
      });
      let resJson = await res.json();
      if (res.status === 200) {
        setName("");
        setEmail("");
        setMessage("User created successfully");
      } else {
        setMessage("Some error occured");
      }
    } catch (err) {
      console.log(err);
    }
  };

Answer 1

event.preventDefault()

停止操作的默认行为。通常，我们在普通 HTML 表单中将此称为“提交”操作。

如果您好奇，可以在此处阅读表单上提交的默认行为：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#method

为了回答您的问题，这将停止提交表单时通常会发生的所有默认行为。下面的代码是您在提交时实际想要发生的情况。