如何使用React.js创建一个注册表格并将其连接到Firebase上

DebugUsery
368 阅读7分钟

如何使用React.js创建一个注册表并将其连接到Firebase上

在本教程中，我们将学习如何使用React.js制作一个注册表，并使用React钩子、Bootstrap和Firebase将其与Firebase从头连接起来。

下面是本教程结束时你将构建的图片。

Final form

前提条件

读者将需要以下条件来理解和构建。

  • 安装一个IDE，最好是VScode。
  • 有HTML和CSS的基本知识。
  • 一个Firebase账户。
  • 有JavaScript的基本知识。
  • 有Node.js的安装。

现在，你的编码环境已经准备好了。打开你的终端或PowerShell，运行下面的命令来创建你的反应应用程序。

npx create-react-app loginforms
cd loginforms
npm start

运行这些命令后，你会看到下面的屏幕。

starting

打开public 文件夹中的index.html ，在文件末尾添加CDN链接。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="stylesheet" 
          href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
          crossorigin="anonymous">
   
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>+
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

  </body>
</html>

你可以根据你的喜好来改变元标签。

创建一个注册表格

在本教程中，注册表被分为两个部分，即标题和注册表，它们将在App.js 。

在src文件夹中创建一个名为components 的新文件夹。在组件文件夹中，将创建以下文件。

  1. header.js
  2. registrationForm.js
  3. style.css

注意：在react中，JSX被用来代替HTML代码。JSX是一种标记语言，包含HTML和JavaScript。

在header.js ，写下以下代码。你也可以从这里复制-粘贴。

import React from 'react';
function Header() {
    return(
        <nav class="bg-dark navbar-dark navbar">
            <div className="row col-12 d-flex justify-content-center text-white">
                <h3>Registration</h3>
            </div>
        </nav>
    )
}
export default Header;

现在，你的页眉已经准备好了。为了在网站上显示它，你必须在App.js 中导入header.js 。在App.js 中写下以下代码。

import logo from './logo.svg';
import './App.css';
import Header from './components/header';

function App() {
  return (
    <div className="App">
      <Header/>
    </div>
  );
}

export default App;

如果你正确地写了上述代码，网页将看起来像这样。

header;

接着是下一个组件，即RegistrationForm。

它包含以下字段。

  1. 名字
  2. 姓氏
  3. 电子邮件ID
  4. 密码
  5. 确认密码
  6. 提交按钮

接下来，在registrationForm.js 中编写以下代码来创建表单主体。

import React, {useState} from 'react';
import './style.css'
function RegistrationForm() {
    return(
      <div className="form">
          <div className="form-body">
              <div className="username">
                  <label className="form__label" for="firstName">First Name </label>
                  <input className="form__input" type="text" id="firstName" placeholder="First Name"/>
              </div>
              <div className="lastname">
                  <label className="form__label" for="lastName">Last Name </label>
                  <input  type="text" name="" id="lastName"  className="form__input"placeholder="LastName"/>
              </div>
              <div className="email">
                  <label className="form__label" for="email">Email </label>
                  <input  type="email" id="email" className="form__input" placeholder="Email"/>
              </div>
              <div className="password">
                  <label className="form__label" for="password">Password </label>
                  <input className="form__input" type="password"  id="password" placeholder="Password"/>
              </div>
              <div className="confirm-password">
                  <label className="form__label" for="confirmPassword">Confirm Password </label>
                  <input className="form__input" type="password" id="confirmPassword" placeholder="Confirm Password"/>
              </div>
          </div>
          <div class="footer">
              <button type="submit" class="btn">Register</button>
          </div>
      </div>      
    )       
}
export default RegistrationForm;

你的基本表单结构已经准备好了，但需要一些样式。为了使你的表单具有风格，在style.css 中写下以下代码。

注意：不要忘记在registrationForm.js 中导入style.css 。在本教程中，它已经被添加。

body{
    background: #bdc3c7;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #2c3e50, #bdc3c7);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #2c3e50, #bdc3c7); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.form{
    background-color: white;
    border-radius: 5px;
    width: 550px;
    margin: 20px auto;
    padding: 20px;
    /* height: 600px; */
}

.form-body{
    text-align: left;
    padding: 20px 10px;
}

.form-body > *{
    padding: 5px;
}

.form__label{
    width: 40%;
}

.form_input{
    width: 60%;
}

.footer{
    text-align: center;
}

在App.js 中添加这个组件。

import logo from './logo.svg';
import './App.css';
import Header from './components/header';
import RegistrationForm from './components/registrationForm'

function App() {
  return (
    <div className="App">
      <Header/>
      <RegistrationForm/>
    </div>
  );
}

export default App;

在注册表单中实现钩子

在本节中，你将对react.js中的钩子有一个概述。关于更多的细节，我建议你先看一下react官方文档。

useState 钩子是用来维护一个变量的状态，你可以使用 来动态更新。setState

现在来看看你的表单，你需要维护表单中每个输入的状态。这样，当用户点击提交按钮时，你就可以将数据发送到后端API。在vanilla JavaScript中，这是用document.getElementById("demo").value ，而在react中，我们将为每个输入建立一个状态，并在每个onChange事件中更新它。

在我们的代码顶部，从 react 中导入useState 和setState 钩子。现在我们可以为所有的输入元素创建一个状态。

    const [firstName, setFirstName] = useState(null);
    const [lastName, setLastName] = useState(null);
    const [email, setEmail] = useState(null);
    const [password,setPassword] = useState(null);
    const [confirmPassword,setConfirmPassword] = useState(null);

我们将在input 标签中添加两个属性来维护状态变量，即

  1. 值
  2. onChange

值。value属性将包含字段的名称，我们在声明状态时使用。

onChange。为onChange属性编写以下代码。

onChange = {(e) => handleInputChange(e)}

<input className="form__input" type="text" value={firstName} onChange = {(e) => handleInputChange(e)} id="firstName" placeholder="First Name"/> 
<input  type="text" name="" id="lastName" value={lastName}  className="form__input" onChange = {(e) => handleInputChange(e)} placeholder="LastName"/>
<input  type="email" id="email" className="form__input" value={email} onChange = {(e) => handleInputChange(e)} placeholder="Email"/>
<input className="form__input" type="password"  id="password" value={password} onChange = {(e) => handleInputChange(e)} placeholder="Password"/>
<input className="form__input" type="password" id="confirmPassword" value={confirmPassword} onChange = {(e) => handleInputChange(e)} placeholder="Confirm Password"/>

在下面的代码中，在onChange事件中调用函数handleInputChange ，它将处理所有输入变化的状态更新。

 const handleInputChange = (e) => {
        const {id , value} = e.target;
        if(id === "firstName"){
            setFirstName(value);
        }
        if(id === "lastName"){
            setLastName(value);
        }
        if(id === "email"){
            setEmail(value);
        }
        if(id === "password"){
            setPassword(value);
        }
        if(id === "confirmPassword"){
            setConfirmPassword(value);
        }

    }

在这个函数中，你会得到输入框中的id和输入的值，只要你在那里输入任何东西，这个特定字段的状态就会被更新。这就是你如何维护所有的状态，以便在提交按钮时，你可以将所有需要的信息发送到后端API。

在本教程中，handleSubmit 函数被使用，你将获得所有在表单中填写的值。这个函数将被用来连接应用程序和Firebase。这是注册表单的最终代码，其中包括你在本教程中迄今为止学到的所有细节。

import React, {useState,setState} from 'react';
import './style.css'
function RegistrationForm() {
    
    const [firstName, setFirstName] = useState(null);
    const [lastName, setLastName] = useState(null);
    const [email, setEmail] = useState(null);
    const [password,setPassword] = useState(null);
    const [confirmPassword,setConfirmPassword] = useState(null);

    const handleInputChange = (e) => {
        const {id , value} = e.target;
        if(id === "firstName"){
            setFirstName(value);
        }
        if(id === "lastName"){
            setLastName(value);
        }
        if(id === "email"){
            setEmail(value);
        }
        if(id === "password"){
            setPassword(value);
        }
        if(id === "confirmPassword"){
            setConfirmPassword(value);
        }

    }

    const handleSubmit  = () => {
        console.log(firstName,lastName,email,password,confirmPassword);
    }

    return(
        <div className="form">
            <div className="form-body">
                <div className="username">
                    <label className="form__label" for="firstName">First Name </label>
                    <input className="form__input" type="text" value={firstName} onChange = {(e) => handleInputChange(e)} id="firstName" placeholder="First Name"/>
                </div>
                <div className="lastname">
                    <label className="form__label" for="lastName">Last Name </label>
                    <input  type="text" name="" id="lastName" value={lastName}  className="form__input" onChange = {(e) => handleInputChange(e)} placeholder="LastName"/>
                </div>
                <div className="email">
                    <label className="form__label" for="email">Email </label>
                    <input  type="email" id="email" className="form__input" value={email} onChange = {(e) => handleInputChange(e)} placeholder="Email"/>
                </div>
                <div className="password">
                    <label className="form__label" for="password">Password </label>
                    <input className="form__input" type="password"  id="password" value={password} onChange = {(e) => handleInputChange(e)} placeholder="Password"/>
                </div>
                <div className="confirm-password">
                    <label className="form__label" for="confirmPassword">Confirm Password </label>
                    <input className="form__input" type="password" id="confirmPassword" value={confirmPassword} onChange = {(e) => handleInputChange(e)} placeholder="Confirm Password"/>
                </div>
            </div>
            <div class="footer">
                <button onClick={()=>handleSubmit()} type="submit" class="btn">Register</button>
            </div>
        </div>
       
    )       
}

export default RegistrationForm

将注册表与Firebase连接起来

好哇！！！你的注册表单已经完成了。你的注册表单已经完成了，但是你需要存储用户注册的信息，这将通过使用Firebase来完成。

好消息是，要使用Firebase，你不需要安装任何应用程序，只需要Google/Gmail的邮件ID。

在这里，你将学习如何将你的注册表单连接到Firebase。为此，你需要做以下工作。

Home Page

  • 要开始你的项目，点击添加项目。

New Project

  • 给你的项目取个名字。在本教程中，我们使用注册表单。

Name of Project

然后点击继续。

  • 然后你需要选择Firebase的默认账户。

Default Setting

然后点击 "创建项目"

现在你的项目文件已经准备好了。你将用它来建立实时数据库。

  • 要建立一个实时数据的设置，你将从左边的面板中选择 "实时数据库"。

Real Time Database

然后点击 "创建数据库 "按钮。设置数据库的对话框将出现。

Settings

你将进入下一步，离开默认位置。由于你是在开发模式下，你将选择 "在测试模式下启动 "并启用它。

现在你的数据库已经准备好存储实时数据了。

你需要在你的反应项目和实时数据之间建立一个联系。

realtime_data

  • 为此，你将从左侧面板转到项目概览，然后点击网络按钮。

Button

  • 你必须注册你的应用程序，并给它取个昵称。在本教程的 "注册表 "中，你可以选择任何你喜欢的名字。

因为你没有托管，所以你不会选择 "为这个应用程序设置Firebase托管 "的选项，然后点击注册应用程序。

Register App

  • 现在你需要把这个包添加到你的react应用中。使用终端或命令提示符，进入你的项目所在的目录，运行这个命令。
npm install firebase

package

在Src文件夹中创建一个名为 "firebase.js "的新文件，在那里你将复制代码。

你必须首先在你的项目中初始化Firebase。然后将数据库导入你的代码中。

  • 为了导入数据，请写下以下语句。
import { getDatabase } from "firebase/database"
  • 要在你的注册表单组件中使用这个数据库，你将需要导出。添加下面的代码。
export const database = getDatabase(app);

在注册表单组件中导入以下文件。

import {database} from '../firebase'
import {ref,push,child,update} from "firebase/database";
  • 为了存储用户输入的信息，你需要在你之前做的handle Submit函数中添加下面的代码。
const handleSubmit = () =>{
    let obj = {
            firstName : firstName,
            lastName:lastName,
            email:email,
            password:password,
            confirmPassword:confirmPassword,
        }       
    const newPostKey = push(child(ref(database), 'posts')).key;
    const updates = {};
    updates['/' + newPostKey] = obj
    return update(ref(database), updates);
}

现在你已经成功完成了这些步骤。

最后，让我们看看它是如何工作的。

在表格中填写你的详细资料，然后点击注册。

Details

要检查输入的情况，你可以从你的Firebase账户中看到。它显示如下。

Datainfirebase

总结

恭喜你，你已经成功地学会了如何使用React.js来创建和构造一个注册表单，并给它添加样式。你还使用了React Hooks来维护状态，这样你就可以在Firebase实时数据库中存储数据。

avatar
文章
阅读
粉丝