reactjs 为什么要把e.preventDefault()放在函数的开头?

kpbwa7wx  于 2023-10-17  发布在  React
关注(0)|答案(1)|浏览(112)

我仍然在发展我对BRAC函数和ReactJS的理解,但是在表单提交的上下文中,为什么我可以用e.preventDefault()?开始我的BRAC函数
我看到这段代码是如何在React中发布表单数据的一个例子(参见文章link),但他们没有解释为什么他们的代码以e.preventDefault()开头。我不确定这是否与React的特性有关,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);
    }
  };
6kkfgxo0

6kkfgxo01#

event.preventDefault()停止动作的默认行为。通常我们在普通的HTML表单中称之为“Submit”操作。
如果你很好奇,可以在这里阅读表单上提交的默认行为:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#method
回答你的问题,这是停止所有的默认行为,通常会发生在提交一个表单。下面的代码是你实际上希望在提交时发生的事情。

相关问题