当我在表单中使用onSubmit时，整个用户界面消失了

Question

我的编码工作正常，但是当我在表单中使用 onSubmit 作为属性时，整个 ui 消失，并且 ui 上没有显示任何内容，为什么解决方案是什么

<form onSubmit={handleSubmit}> // what is the problem with this line because this onsubmitdisappear the ui 
// the code goes here
</form>

Answer 1

您是否在

preventDefault()

函数中使用

handleSubmit

方法？

<form ...>

默认行为是提交并刷新页面，这就是 ui 消失的原因。您需要通过使用

preventDefault()

防止这种默认行为来处理它。通过在handleSubmit中调用preventDefault()，可以阻止表单提交和刷新页面，从而允许您根据需要处理表单数据。

以下是您应该如何修改

handleSubmit

函数：

const handleSubmit = (submitevent) => {
submitevent.preventDefault();
// form submission logic here
//...

}

Answer 2

---

由于您没有提到任何源代码，这些可能是您面临的问题：

• 函数的正确初始化。
• 如果重定向到空白页面，您应该阻止表单提交的默认行为，如下面的代码所示。

function handleSubmit(e) {
    e.preventDefault(); 
}

<form onSubmit={handleSubmit}>
   
</form>

---