React中如何阻止表单组件重置？新手遇提交后页面回退问题

核心问题 #

表单提交时浏览器默认会触发页面刷新，导致React组件重新挂载，所有状态重置为初始值，所以NextStep组件短暂显示后就回到了邮箱输入组件。

快速修复：阻止表单默认行为 #

在两个提交处理函数中添加e.preventDefault()，阻止浏览器的默认刷新行为：

修改App.jsx中的提交函数：

function submitEmailHandler(e) {
  e.preventDefault(); // 新增：阻止页面刷新
  setEmail(e.currentTarget.email.value);
}

function submitPasswordHandler(e) {
  e.preventDefault(); // 新增：阻止页面刷新
  setPassword(e.currentTarget.password.value);
}

可选优化：用步骤状态控制流程（更健壮） #

靠email和password的长度判断步骤容易出问题（比如用户输入空值后又删除），建议新增一个状态专门控制当前流程步骤：

import { useState } from 'react'; // 别忘了导入useState！
import Header from './components/Header'
import EmailTaker from './components/EmailTaker'
import PasswordTaker from './components/PasswordTaker'
import NextStep from './components/NextStep'

function GeneralInformationForm(){
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [currentStep, setCurrentStep] = useState('email'); // 控制当前步骤

  function submitEmailHandler(e) {
    e.preventDefault();
    const inputEmail = e.currentTarget.email.value;
    if (inputEmail.trim()) { // 简单校验非空
      setEmail(inputEmail);
      setCurrentStep('password');
    }
  }

  function submitPasswordHandler(e) {
    e.preventDefault();
    const inputPassword = e.currentTarget.password.value;
    if (inputPassword.trim()) { // 简单校验非空
      setPassword(inputPassword);
      setCurrentStep('next');
    }
  }

  return(
    <>
      {currentStep === 'email' && <EmailTaker onSubmit={submitEmailHandler} />}
      {currentStep === 'password' && <PasswordTaker onSubmit={submitPasswordHandler} />}
      {currentStep === 'next' && <NextStep/>}
    </>
  )
}

function App() {
  return (
    <>
      <Header/>
      <GeneralInformationForm/>
    </>
  )
}

export default App

补充说明 #

• 你的原代码中GeneralInformationForm组件漏掉了useState的导入，这会直接导致运行报错，记得补上。
• 表单提交的默认行为是发起HTTP请求刷新页面，React单页应用必须阻止这个行为才能保留组件状态。

内容的提问来源于stack exchange，提问作者Luiz Augusto