React中Tabs切换共享表单组件时useState状态丢失问题咨询

你的RegisterAndLoginForm组件被放在TabsContent中，切换到登录标签页时，注册对应的TabsContent会被卸载，组件内的registerForm状态随之销毁；切回注册页时组件重新挂载，useState重置为初始值{name:""}，输入的数据自然丢失。

不需要拆分两个独立表单，把表单状态提升到父组件LoginAndRegister中管理即可——无论子组件是否卸载，状态都保存在父组件里，不会丢失。

修改后的完整代码 #

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { useState } from "react";

// 子组件：仅负责渲染表单，状态和逻辑由父组件传入
const RegisterAndLoginForm = ({ name, registerForm, loginForm, onRegisterInput, onLoginInput, onSubmit, onClear, onConvertToBase64 }) => {
  return (
    <main className="bg-transparent_bg w-full flex flex-col items-center box-border rounded-md">
      <form
        className="w-full text-center space-y-3 p-2 box-border"
        onSubmit={onSubmit}
      >
        <h3 className="font-extrabold text-foreground text-xl bg-slate-500 py-2 rounded-md tracking-widest">
          {name}
        </h3>
        {name === "Register" && (<label htmlFor="name">Name :</label>)}
        {name === "Register" && (<input
          id="name"
          className="input"
          type="text"
          placeholder="name"
          name="name"
          value={registerForm?.name}
          onChange={onRegisterInput}
        />)}
        <label htmlFor="username">Username: </label>
        <input
          id="username"
          className="input"
          type="text"
          placeholder="username"
          name="username"
          onChange={name === "Register" ? onRegisterInput : onLoginInput}
        />
        {name === "Register" && (<label htmlFor="email">Email: </label>)}
        {name === "Register" && (<input
          id="email"
          className="input"
          type="text"
          placeholder="email"
          name="email" // 修复原代码中name属性错误
          onChange={onRegisterInput}
        />)}
        <label htmlFor="password">Password: </label>
        <input
          id="password"
          className="input"
          type="password"
          placeholder="password"
          name="password"
          onChange={name === "Register" ? onRegisterInput : onLoginInput}
        />
        {name === "Register" && (<label htmlFor="confirmPassword">Confirm password: </label>)}
        {name === "Register" && (<input
          id="confirmPassword"
          className="input"
          type="password"
          placeholder="confirm password"
          name="confirmPassword"
          onChange={onRegisterInput}
        />)}

        {name === "Register" && (<div className="w-full bg-slate-500 text-foreground py-2 px-1 rounded-md overflow-hidden">
          <input
            className="text-[12px] font-medium cursor-pointer"
            type="file"
            onChange={onConvertToBase64}
          />
        </div>)}

        <div className="flex justify-center gap-5 py-1 box-border">
          <button
            type="submit"
            className="bg-blue-400 w-24 px-3 py-2 rounded-md hover:bg-blue-500 active:bg-blue-600 text-white tracking-widest"
          >
            {name}
          </button>
          <button
            onClick={onClear}
            type="button"
            className="bg-red-500 w-24 px-3 py-2 rounded-md hover:bg-red-600 active:bg-red-700 text-white tracking-widest"
          >
            Clear
          </button>
        </div>
      </form>
    </main>
  );
};

const LoginAndRegister = () => {
  // 父组件统一管理两个表单的状态
  const [registerForm, setRegisterForm] = useState({name:""});
  const [loginForm, setLoginForm] = useState({});

  const handleRegisterInput = (e) =>{
    setRegisterForm({...registerForm, [e.target.name]: e.target.value});
  }

  const handleLoginInput = (e) =>{
    setLoginForm({...loginForm, [e.target.name]: e.target.value})
  }
  
  const handleSubmit = (e) =>{
    e.preventDefault();
    // 根据当前激活标签区分提交逻辑
    const activeTab = document.querySelector('[data-state="active"]').value;
    if(activeTab === 'register'){
      console.log('提交注册表单:', registerForm);
    } else {
      console.log('提交登录表单:', loginForm);
    }
  }

  const handleClear = () =>{
    // 根据当前激活标签清空对应表单
    const activeTab = document.querySelector('[data-state="active"]').value;
    if(activeTab === 'register'){
      setRegisterForm({name:""});
    } else {
      setLoginForm({});
    }
  }

  const convertToBase64 = (e) => {
    const file = e.target.files[0];
    const reader = new FileReader();
    reader.readAsDataURL(file);

    reader.onload = () => {
      setRegisterForm({ ...registerForm, avatar: reader.result });
    };
  };

  return (
    <div className="grid m-auto grid-cols-2">
      <div>
        <Tabs defaultValue="register" className="w-[500px] p-1">
          <TabsList className="w-full">
            <TabsTrigger value="register" className="w-[50%]">
              Register
            </TabsTrigger>
            <TabsTrigger value="login" className="w-[50%]">
              Login
            </TabsTrigger>
          </TabsList>
          <TabsContent value="register" className="border rounded-md">
            <RegisterAndLoginForm 
              name={"Register"} 
              registerForm={registerForm}
              onRegisterInput={handleRegisterInput}
              onSubmit={handleSubmit}
              onClear={handleClear}
              onConvertToBase64={convertToBase64}
            />
          </TabsContent>
          <TabsContent value="login" className="border rounded-md">
            <RegisterAndLoginForm 
              name={"Login"} 
              loginForm={loginForm}
              onLoginInput={handleLoginInput}
              onSubmit={handleSubmit}
              onClear={handleClear}
            />
          </TabsContent>
        </Tabs>
      </div>
      <div>memories logo</div>
    </div>
  );
};

export default LoginAndRegister;

核心修改说明 #

• 状态提升：把registerForm和loginForm从子组件移到父组件，避免组件卸载导致状态丢失。
• 子组件纯渲染：子组件只做UI展示，所有逻辑（输入处理、提交、清空）由父组件提供回调，符合React单向数据流设计。
• 修复bug：修正原注册表单中email输入框name属性错误（原代码写为username）。
• 完善清空逻辑：根据当前激活标签页，精准清空对应表单的状态。

如果不想提升状态，也可以修改Tabs组件的行为，让非激活的TabsContent不卸载（仅用CSS隐藏）。比如部分Tabs组件支持keepAlive属性，但这种方式会保留冗余DOM节点，不如状态提升简洁高效。

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