React Hook 表单 |创建基本的 ReactJS 注册和登录表单

在本文中，我们将学习如何使用 React Hook 创建基本的注册和登录表单。我们将使用 useState 和 useEffect Hook 来管理表单的状态和处理表单事件。

环境

在开始之前，需要先安装 Node.js 和 React。

创建项目

我们可以使用 create-react-app 作为项目的脚手架。

npx create-react-app react-hook-form
cd react-hook-form
npm start

创建表单

我们将同时创建注册和登录表单，它们将共享相同的表单组件。首先我们需要在 src 目录下创建一个 components 目录，然后在 components 目录下创建一个 Form.js 文件。

在 Form.js 文件中，我们将创建一个 Form 组件，该组件将接受 props，包括表单类型（注册或登录）和提交回调函数。组件将使用 useState Hook 来管理表单状态，并将使用 useEffect Hook 来提交表单。

import React, { useState, useEffect } from 'react';

const Form = ({ type, onSubmit }) => {
  const [data, setData] = useState({ email: '', password: '' });

  const handleSubmit = event => {
    event.preventDefault();
    onSubmit(data);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="email">Email</label>
        <input
          type="email"
          id="email"
          value={data.email}
          onChange={event => setData({ ...data, email: event.target.value })}
        />
      </div>
      <div>
        <label htmlFor="password">Password</label>
        <input
          type="password"
          id="password"
          value={data.password}
          onChange={event =>
            setData({ ...data, password: event.target.value })
          }
        />
      </div>
      <button type="submit">{type}</button>
    </form>
  );
};

export default Form;

在表单中，我们使用 useState Hook 来管理表单的状态。每次输入字段的值时，我们会使用 setData 函数来更新状态。当用户提交表单时，我们将调用 onSubmit 回调并传递表单数据。

创建App

我们将在 src 目录下创建一个 App.js 文件，该文件将渲染我们的表单组件并处理表单提交。

import React from 'react';
import Form from './components/Form';

const onSubmit = data => console.log(data);

const App = () => {
  return (
    <div>
      <h1>Registration Form</h1>
      <Form type="Register" onSubmit={onSubmit} />
      <h1>Login Form</h1>
      <Form type="Login" onSubmit={onSubmit} />
    </div>
  );
};

export default App;

我们将在 App.js 中使用我们的表单组件，并提供一个 onSubmit 回调。在 onSubmit 回调中，我们将简单打印表单数据。

完成

现在我们已经创建了一个基本的注册和登录表单，可以通过 onSubmit 回调来处理表单数据。您可以根据需要改进表单并添加其他字段。