Next js：点击登录显示登录表单，点击注册显示注册表单的功能
在Next.js中实现点击登录显示登录表单，点击注册显示注册表单的功能，你可以使用React的状态管理来控制显示哪个表单。这里是一个简单的示例，展示了如何根据用户的点击切换显示登录或注册表单。
首先，你需要在你的Next.js项目中创建一个组件，比如命名为authform.tsx。在这个组件中，你可以使用React的useState钩子来管理当前应该显示哪个表单。
authform.tsx
'use client'
import React, { useState } from 'react';
const AuthForm = () => {
// 使用状态管理来控制是显示登录表单还是注册表单
// 默认显示登录表单
const [isLogin, setIsLogin] = useState(true);
return (
<div>
<div>
<button onClick={() => setIsLogin(true)}>登录</button>
<button onClick={() => setIsLogin(false)}>注册</button>
</div>
{isLogin ? (
<div>
<h2>登录</h2>
{/* 登录表单的内容 */}
<form>
<input type="text" placeholder="用户名" />
<input type="password" placeholder="密码" />
<button type="submit">登录</button>
</form>
</div>
) : (
<div>
<h2>注册</h2>
{/* 注册表单的内容 */}
<form>
<input type="text" placeholder="用户名" />
<input type="email" placeholder="邮箱" />
<input type="password" placeholder="密码" />
<button type="submit">注册</button>
</form>
</div>
)}
</div>
);
};
export default AuthForm;
在这个示例中，我们创建了两个按钮，一个用于切换到登录表单，另一个用于切换到注册表单。通过设置状态isLogin为true或false，我们可以控制是显示登录表单还是注册表单。
然后，你可以在你的页面组件中导入并使用这个authform组件。例如，在pages/index.js中：
import React from 'react';
import AuthForm from '../components/AuthForm'; // 假设你的AuthForm组件位于components文件夹
const HomePage = () => {
return (
<div>
<h1>欢迎来到我们的网站</h1>
<AuthForm />
</div>
);
};
export default HomePage;
这样，当用户点击“登录”按钮时，页面会显示登录表单；点击“注册”按钮时，页面会切换到显示注册表单。通过React的状态管理和条件渲染，你可以很容易地实现这样的功能。
