React写一个注册后登录的页面

usernameID007

已于 2023-07-17 21:55:05 修改

阅读量124

点赞数

文章标签： react.js javascript 前端

于 2023-07-17 21:26:03 首次发布

本文链接：https://blog.csdn.net/usernameID007/article/details/131774992

版权

一、先写一个注册组件（RegistrationForm）

import React, { useState } from 'react';

const RegistrationForm = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleEmailChange = (e) => {
    setEmail(e.target.value);
  };

  const handlePasswordChange = (e) => {
    setPassword(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // 进行注册逻辑的处理，可以发送请求给后端
    console.log('注册成功！邮箱：', email, '密码：', password);
    // 清空表单
    setEmail('');
    setPassword('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        邮箱:
        <input type="email" value={email} onChange={handleEmailChange} />
      </label>
      <br />
      <label>
        密码:
        <input type="password" value={password} onChange={handlePasswordChange} />
      </label>
      <br />
      <button type="submit">注册</button>
    </form>
  );
};

export default RegistrationForm;

二、再写一个登录的组件（LoginForm）

import React, { useState } from 'react';

const LoginForm = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleEmailChange = (e) => {
    setEmail(e.target.value);
  };

  const handlePasswordChange = (e) => {
    setPassword(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // 进行登录逻辑的处理，可以发送请求给后端
    console.log('登录成功！邮箱：', email, '密码：', password);
    // 清空表单
    setEmail('');
    setPassword('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        邮箱:
        <input type="email" value={email} onChange={handleEmailChange} />
      </label>
      <br />
      <label>
        密码:
        <input type="password" value={password} onChange={handlePasswordChange} />
      </label>
      <br />
      <button type="submit">登录</button>
    </form>
  );
};

export default LoginForm;

三、将注册组件和登录组件方法一个‘父’组件（App）中。

import React from 'react';
import RegistrationForm from './RegistrationForm';
import LoginForm from './LoginForm';

const App = () => {
  return (
    <div>
      <h2>注册</h2>
      <RegistrationForm />
      <hr />
      <h2>登录</h2>
      <LoginForm />
    </div>
  );
};

export default App;

这样就完成了一个简单的注册后登录的功能。