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

Question

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

如果为真，我希望文本显示为“您已提交验证”。到目前为止它“有效”。问题是，当我点击input:submit时，大约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();
}}

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

Why does onClick on input type=submit in a Form automatically change back the state I set?

forms

input

onclick

reactjs

use-state