为什么onClick-on-inputtype=submit在表单中会自动更改回我设置的状态

Question

我正在尝试制作一个简单的"通过上传银行转账图片来验证您的付款"；。我创建了一个"；isSent"状态和它将变为"0"的函数；isSent"从虚假到真实。

如果是真的，我希望文本出现"；您已经提交了您的验证"；。到目前为止；作品"；。问题是，当我点击输入：提交时，它只显示"提交"；您已提交您的验证"；在大约1秒内；isSent"再次为false。

有人能向我解释一下发生了什么事吗？谢谢，这是我的代码：

import React, { useState } from "react";
function PaymentVerification() {
const [isSent, setisSent] = useState(false);
const verificationSent = () => {
setisSent(true);
};
return (
<div>
<p>Payment Verification</p>
<form action=''>
<label htmlFor=''>Please uploal your image</label>
<input
type='file'
name='imageVerification'
id='imageVerification'
accept='image/*'
/>
<br />
<input
type='submit'
value='Send for verification'
onClick={() => verificationSent()}
/>
</form>
{isSent ? (
<p>you have submitted your verification</p>
) : (
<p>you havent uploaded yet</p>
)}
</div>
);
}
export default PaymentVerification;

Answer 1

您的代码确实没有什么问题，但浏览器在；提交"；按钮。

默认情况下，单击此按钮时会重新加载整个页面这就是它按照您描述的方式运行的原因：您期望的消息会出现一段时间，但随后会重新加载整个页面。因此，所有组件都将返回到其初始状态。

可以通过使用传递给事件处理程序的event参数的preventDefault方法来解决此问题，以防止浏览器执行其默认行为并避免页面重新加载。

onClick={(e) => {
e.preventDefault();
verificationSent();
}}