React 登录注册自由切换（纯代码-可直接拉取）-CSDN博客

本文链接：https://blog.csdn.net/m0_63021947/article/details/135243957

外层文件

import './index.css';
import React, { useState } from 'react';
import { Button } from 'antd';
import Login from './login/index';
import Register from './register/index';

function LoginRegister() {
	const [className, setClassName] = useState(false);

	const handleClickLogin = () => {
		setClassName(false);
	};
	const handleClickRegister = () => {
		setClassName(true);
	};

	return (
		<div className="Data Data-pagination">
			<div className={className ? 'container panel-active' : 'container'}>
				<Login />
				<Register />
				<div className="overlay-box">
					<div className="overlay">
						<div className="panel over-left">
							<Button
								type="primary"
								className="formButton signIn"
								onClick={handleClickLogin}
								style={{ backgroundColor: '#256494' }}
							>
								去登录
							</Button>
						</div>
						<div className="panel over-right">
							<Button
								type="primary"
								className="formButton signUp"
								onClick={handleClickRegister}
								style={{ backgroundColor: '#256494' }}
							>
								去注册
							</Button>
						</div>
					</div>
				</div>
			</div>
		</div>
	);
}
export default LoginRegister;


.container {
  width: 100%;
  width: 460px;
  height: 310px;
  position: relative;
  margin: auto;
}

.formbox {
  height: 100%;
  position: absolute;
  top: 0;
  transition: all 0.6s ease-in-out;
}

.login {
  left: 0;
  width: 80%;
  opacity: 0;
  z-index: 1;
}

.register {
  left: 0;
  width: 80%;
  z-index: 2;
}

.form {
  background-color: #e9e9e9;
  align-items: center;
  padding: 10px 20px;
  height: 100%;
  text-align: center;
}

.formTitle {
  font-weight: 600;
  margin: 0;
  margin-bottom: 10px;
  font-size: 18px;
}

.formInput {
  background-color: #fff;
  border: none;
  width: 100%;
}

.formLink {
  margin-left: 40px;
}

.formButton:active {
  scale: 0.95;
}

.overlay-box {
  height: 100%;
  left: 80%;
  overflow: hidden;
  position: absolute;
  top: 0;
  transition: transform 0.6s ease-in-out;
  width: 20%;
  z-index: 100;
}

.overlay {
  background-color: rgba(225, 225, 225, 0.25);

  height: 100%;
  left: -100%;
  position: relative;
  transform: translateX(0);
  transition: transform 0.6s ease-in-out;
  width: 200%;
}

.panel {
  width: 50%;
  height: 100%;
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  text-align: center;
  top: 0;
  transform: translateX(0);
  transition: transform 0.6s ease-in-out;
}

.over-left {
  transform: translateX(-20%);
}

.over-right {
  right: 0;
  transform: translateX(0);
}

.panel-active .login {
  transform: translateX(25%);
  opacity: 1;
  z-index: 3;
}

.panel-active .register {
  transform: translateX(25%);
}

.panel-active .overlay-box {
  transform: translateX(-400%);
}

.panel-active .overlay {
  transform: translateX(50%);
}

.panel-active .over-left {
  transform: translateX(0);
}

.panel-active .over-right {
  transform: translateX(200%);
}

.App-formCheck {
  width: 300px;
  display: flex;
  flex-direction: row;
  margin-left: 20px;
  margin-top: -10px;
}

.App-formCheckText {
  width: 280px;
  margin-left: 10px;
  text-align: left;
  padding-top: 10px;
}

.App-privacyTitle {
  /* font-family: PingFang SC; */
  font-size: 20px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0em;
  text-align: center;
  color: #333;
}

.App-privacyText {
  width: 735px;
  height: 586px;
  margin-left: 14px;
  margin-top: 10px;
  overflow-y: scroll;
}

.verificationInput {
  border: none;
}

:where(.css-dev-only-do-not-override-p7e5j5).ant-modal .ant-modal-footer .ant-btn+.ant-btn:not(.ant-dropdown-trigger) {
  background-color: #256494;
}

注册文件

import React, { useState } from 'react';
import { Button, Input, Form, Checkbox, Modal } from 'antd';

export default function Login() {
	const [form] = Form.useForm();
	const [hasAgreed, setHasAgreed] = useState(false);
	const [agreementModal, setAgreementModal] = useState(false);

	const onFinish = (values) => {
		console.log('Success:', values);
	};

	const onFinishFailed = (errorInfo) => {
		console.log('Failed:', errorInfo);
	};

	const handleCheckAgreement = (e) => {
		console.log(`checked = ${e.target.checked}`);
		setHasAgreed(!hasAgreed);
	};

	const showAgreementModal = () => {
		setAgreementModal(true);
	};

	const handleHasAgree = () => {
		setAgreementModal(false);
		setHasAgreed(true);
	};

	const handleWithoutAgree = () => {
		setAgreementModal(false);
		setHasAgreed(false);
	};

	return (
		<div>
			<div className="formbox login">
				<Form
					labelCol={{
						span: 6,
					}}
					wrapperCol={{
						span: 17,
					}}
					name="basic"
					onFinish={onFinish}
					onFinishFailed={onFinishFailed}
					autoComplete="off"
					form={form}
					className="form formLogin"
				>
					<div className="formTitle">注册</div>
					<Form.Item
						name="username"
						label="用户名"
						rules={[
							{
								required: true,
								message: `请输入用户名`,
							},
						]}
					>
						<Input
							type="text"
							placeholder="用户名"
							className="formInput"
						></Input>
					</Form.Item>
					<Form.Item
						style={{
							marginTop: -16,
						}}
						name="email"
						label="邮箱"
						rules={[
							{
								required: true,
								message: `请输入邮箱`,
							},
						]}
					>
						<Input
							type="email"
							placeholder="邮箱"
							className="formInput"
						></Input>
					</Form.Item>
					<Form.Item
						style={{
							marginTop: -16,
						}}
						name="password"
						label="密码"
						rules={[
							{
								required: true,
								message: `请输入密码`,
							},
						]}
					>
						<Input
							type="password"
							placeholder="密码"
							className="formInput"
						></Input>
					</Form.Item>
					<Form.Item
						name="agreement"
						valuePropName="checked"
						style={{
							marginTop: -10,
						}}
						rules={[
							{
								validator: (_, value) =>
									value
										? Promise.resolve()
										: Promise.reject(new Error('请阅读并同意相关条款*')),
							},
						]}
					>
						<div className="App App-formCheck">
							<Checkbox
								onChange={handleCheckAgreement}
								checked={hasAgreed}
							></Checkbox>
							<div className="App App-formCheckText">
								我已阅读并同意
								<a href="#!" onClick={showAgreementModal}>
									《用户隐私条款》
								</a>
								、<a href="#!">《软件商业使用服务协议》</a>
							</div>
						</div>
					</Form.Item>

					<Button
						type="primary"
						className="formButton"
						style={{ backgroundColor: '#256494' }}
					>
						注册
					</Button>
				</Form>
			</div>
		</div>
	);
}

登录文件

import React from 'react';
import { Button, Input, Form } from 'antd';

export default function Register() {
	const [form] = Form.useForm();

	const onFinish = (values) => {
		console.log('Success:', values);
	};

	const onFinishFailed = (errorInfo) => {
		console.log('Failed:', errorInfo);
	};
	return (
		<div>
			<div className="formbox register">
				<Form
					name="basic"
					labelCol={{
						span: 6,
					}}
					wrapperCol={{
						span: 17,
					}}
					onFinish={onFinish}
					onFinishFailed={onFinishFailed}
					autoComplete="off"
					// layout="vertical"
					form={form}
					className="form formRegister"
				>
					<div className="formTitle">登录</div>
					<Form.Item
						// style={{
						// 	marginTop: -10,
						// }}
						name="username"
						label="用户名"
						rules={[
							{
								required: true,
								message: `请输入用户名`,
							},
						]}
					>
						<Input
							type="text"
							placeholder="用户名"
							className="formInput"
						></Input>
					</Form.Item>
					<Form.Item
						style={{
							marginTop: -20,
						}}
						name="email"
						label="邮箱"
						rules={[
							{
								required: true,
								message: `请输入邮箱`,
							},
						]}
					>
						<Input
							type="email"
							placeholder="邮箱"
							className="formInput"
						></Input>
					</Form.Item>
					<Form.Item
						style={{
							marginTop: -20,
						}}
						name="password"
						label="密码"
						rules={[
							{
								required: true,
								message: `请输入密码`,
							},
						]}
					>
						<Input
							type="password"
							placeholder="密码"
							className="formInput"
						></Input>
					</Form.Item>
					<Form.Item
						style={{
							marginTop: -20,
						}}
						name="phone"
						label="电话"
						rules={[
							{
								required: true,
								message: `请输入电话`,
							},
						]}
					>
						<Input
							type="phone"
							placeholder="电话"
							className="formInput"
						></Input>
					</Form.Item>
					<Form.Item
						style={{
							marginTop: -20,
							marginLeft: 80,
						}}
						name="verification"
						rules={[
							{
								required: true,
								message: `请输入验证码`,
							},
						]}
					>
						<div
							style={{
								display: 'flex',
								flexDirection: 'row',
								width: 235,
							}}
						>
							<Input
								className="verificationInput"
								type="verification"
								placeholder="验证码"
							></Input>
							<Button
								style={{
									marginLeft: 20,
									backgroundColor: '#256494',
									color: '#fff',
								}}
							>
								获取验证码
							</Button>
						</div>
					</Form.Item>
					<Button
						type="primary"
						className="formButton"
						style={{ backgroundColor: '#256494' }}
					>
						登录
					</Button>

					{/* <a href="#!" className="formLink">
						忘记密码
					</a> */}
				</Form>
			</div>
		</div>
	);
}