React实现登录与注册页面切换标签页功能问题求助

我看了你的代码，发现几个关键问题导致标签页切换不工作，咱们一步步来修复：

问题分析 #

• 冗余且不同步的状态：你同时用了login和signup两个状态，但这两个状态是互斥的（同一时间只能显示一个），用两个状态很容易出现状态不一致的情况。而且你定义的handleLogin函数根本没被调用，导致signup状态一直是初始的true，注册组件也就一直显示着。
• 点击逻辑与渲染判断不匹配：第二个按钮的点击事件是setLogin(false)，但你渲染注册组件的条件是{signup && <SignUp />}，两者完全没有关联，自然触发不了切换。
• 未合理利用已定义的处理函数：你写了handleLogin但没在按钮上绑定，反而用了内联的状态修改，导致逻辑分散混乱。

修复后的代码 #

我们可以简化状态管理，只用一个状态来控制当前激活的标签，比如activeTab，取值为'login'或'signup'，这样逻辑会清晰很多：

import React, { useState } from "react";
import Login from "./Login";
import SignUp from "./SignUp";

const Tabs = () => {
  // 用一个状态管理当前激活的标签，默认显示登录页
  const [activeTab, setActiveTab] = useState('login');

  return (
    <>
      <div className="tabs">
        {/* 点击切换到登录标签，可给激活按钮加样式区分（可选） */}
        <button 
          onClick={() => setActiveTab('login')}
          className={activeTab === 'login' ? 'active-tab' : ''}
        >
          Üyelik Girişi
        </button>
        {/* 点击切换到注册标签 */}
        <button 
          onClick={() => setActiveTab('signup')}
          className={activeTab === 'signup' ? 'active-tab' : ''}
        >
          Yeni Uyelik
        </button>

        {/* 根据当前激活标签渲染对应组件 */}
        {activeTab === 'login' && <Login />}
        {activeTab === 'signup' && <SignUp />}
      </div>
    </>
  );
};

export default Tabs;

额外优化建议 #

• 可以给激活的按钮添加active-tab类名，通过CSS做样式区分（比如改变文字颜色、添加底部高亮边框等），让用户更清楚当前处于哪个标签页。
• 如果登录/注册组件包含表单，切换标签时可以重置表单状态，避免残留之前输入的内容，提升体验。

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