Reactjs 为什么表单中onClick on input type=submit会自动更改回我设置的状态？

我试图做一个简单的“通过上传银行转账图片验证您的付款”。 我创建了一个“isSent”状态，以及一个函数，它将“isSent”从false变为true

如果为true，我希望文本显示为“您已提交您的验证”。 到目前为止，它“有效”。问题是，当我点击输入：submit时，它只在大约1秒钟内显示“you have submited your verification”，然后它再次将“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;

import React，{useState}来自“React”；
函数PaymentVerification（）{
常量[isSent，setisSent]=useState（false）；
常量验证事件=（）=>{
设定值（真）；
};
返回(
付款核实

请上传你的图片


verificationSent（）}
/>
{isSent(
您已经提交了您的验证

) : (
你还没有上传

)}
);
}
导出默认支付验证；

您的代码实际上没有什么问题，但是当单击“提交”按钮时浏览器应用的默认行为

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

您可以通过使用传递给事件处理程序的

事件

参数的

preventDefault

方法来解决此问题，以防止浏览器执行其默认行为并避免重新加载页面

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

---

从提交按钮中删除onclick函数（onclick={（）=>verificationSent（）}），并将onSubmit={handleSubmit}添加到表单元素中。这样您就可以有一个完整的链接了。谢谢您的回复！非常感谢。这是有效的：）