October 12, 2020

React钩子构建CRUD应用,React Hooks CRUD应用, Build a CRUD App in React with Hooks

By Gideon Javascript /Jquery / React / Bootstrap / Web 0 Comments

在React- Hooks中引入了一个新概念。钩子是类的替代方法。如果您以前使用过React，那么您将熟悉简单的（功能性）组件 simple (functional) components 和类组件 class components。

Simple component

const Example = () => {
  return <div>I'm a simple component</div>
}

Class component

class Example extends Component {
  render() {
    return <div>I'm a class component</div>
  }
}

直到现在，类的许多可用功能（例如生命周期方法 lifecycle methods 和状态 state）才对简单组件可用。新的Hooks提案添加了所有这些功能以及更多功能。

我想尝试一下Hooks，看看没有任何类的应用看起来如何，但是我还没有看到任何示例，所以我决定自己做一个。我创建了一个简单的CRUD（创建，读取，更新，删除）应用程序，该应用程序使用了Hooks，没有使用类，并且为其他想学习如何使用它们的人创建了本教程。

如果您不知道如何在React中制作一个简单的CRUD应用程序，无论您使用类还是钩子，这篇文章也将对您有所帮助。

先决条件

为了遵循本教程，您需要具备HTML，CSS和JavaScript / ES6的基础知识。您还应该了解React的基础知识，可以通过阅读React入门来学习。

目标

在本教程中，我们将制作一个简单的CRUD应用程序。它将有用户，您将能够添加，更新或删除用户。我们将不使用任何React类，而是在功能组件上使用状态挂钩和效果挂钩。如果您一路迷路，请务必检查完成项目的来源。

创建React应用

我们将从使用create-react-app（CRA）安装项目开始。

npx create-react-app react-hooks

然后运行npm i。

现在，您已经准备好使用React。

初始设置

首先，从不需要的样板中清除所有文件。删除一切从/src文件夹除外App.js，index.js和index.css。

对于index.css，我只是从Primitive中复制并粘贴CSS，Primitive是我制作的一个简单CSS样板，因为此应用程序的目的是在React上工作，而不关心设计。这个CSS样板只是添加了一些合理的默认值和一个简单的网格，因此我们可以开始制作原型。

在中index.js，我们将通过删除对Service Workers的引用来简化它。

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'

ReactDOM.render(<App />, document.getElementById('root'))

在中App.js，我将为而制作一个简单的功能组件，App而不是一个类。

App.js

import React from 'react'

const App = () => {
  return (
    <div className="container">
      <h1>CRUD App with Hooks</h1>
      <div className="flex-row">
        <div className="flex-large">
          <h2>Add user</h2>
        </div>
        <div className="flex-large">
          <h2>View users</h2>
        </div>
      </div>
    </div>
  )
}

export default App

现在我们有了应用程序的初始设置和框架。

React钩子构建CRUD应用,React Hooks CRUD应用, Build a CRUD App in React with Hooks

State vs. Hook State

如果我们看一个带有状态的类组件和带有Hook状态的功能组件的非常简单的示例，我们可以看到相同点和不同点。使用类状态，您将获得一个主状态对象，然后使用类和上的方法进行更新setState()。

我将快速制作一些示例代码，就好像它是一个图书馆，并且您有带有状态的书。

Class Component State Example

class App extends Component {
  initialState = {
    title: '',
    available: false,
  }

  state = initialState

  updateBook = (book) => {
    this.setState({ title: book.title, available: book.available })
  }
}

有了Hook状态，每种状态类型都有一个getter和setter方法（可以随意设置），并且我们显然创建函数而不是方法。

Hook State Example

const App = () => {
  const initialBookState = {
    title: '',
    available: false,
  }

  const [book, setBook] = useState(initialBookState)

  const updateBook = (book) => {
    setBook({ title: book.title, available: book.available })
  }
}

我不会深入了解钩子与类组件之间的基本原理，因为您可以在React的Hooks简介中了解所有内容。我将向您展示如何与他们一起创建功能实用的应用程序。

设置视图

我们要做的第一件事是为视图创建一些示例数据和一个表格来显示它。创建一个名为tablesin的新目录src，以及一个名为的文件UserTable.js。我们将制作桌子的骨架。

tables/UserTable.js

import React from 'react'

const UserTable = () => (
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Username</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Name data</td>
        <td>Username data</td>
        <td>
          <button className="button muted-button">Edit</button>
          <button className="button muted-button">Delete</button>
        </td>
      </tr>
    </tbody>
  </table>
)

export default UserTable

现在，只需导入文件并添加新组件即可。

App.js

import React from 'react'
import UserTable from './tables/UserTable'

const App = () => {
  return (
    <div className="container">
      <h1>CRUD App with Hooks</h1>
      <div className="flex-row">
        <div className="flex-large">
          <h2>Add user</h2>
        </div>
        <div className="flex-large">
          <h2>View users</h2>
          <UserTable />
        </div>
      </div>
    </div>
  )
}

export default App

让我们引入一些随机的虚拟数据和useState从React导入。

App.js

import React, { useState } from 'react'
import UserTable from './tables/UserTable'

const App = () => {
  const usersData = [
    { id: 1, name: 'Tania', username: 'floppydiskette' },
    { id: 2, name: 'Craig', username: 'siliconeidolon' },
    { id: 3, name: 'Ben', username: 'benisphere' },
  ]

  const [users, setUsers] = useState(usersData)

  return (
    <div className="container">
      <h1>CRUD App with Hooks</h1>
      <div className="flex-row">
        <div className="flex-large">
          <h2>Add user</h2>
        </div>
        <div className="flex-large">
          <h2>View users</h2>
          <UserTable users={users} />
        </div>
      </div>
    </div>
  )
}

export default App

道具的工作原理与以前一样。我们将通过发送的用户数据进行映射，并显示每个用户的属性，如果没有用户，则显示一条消息。编辑和删除按钮尚未连接到任何东西，因此它们不会做任何事情。

UserTable.js

import React from 'react'

const UserTable = (props) => (
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Username</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      {props.users.length > 0 ? (
        props.users.map((user) => (
          <tr key={user.id}>
            <td>{user.name}</td>
            <td>{user.username}</td>
            <td>
              <button className="button muted-button">Edit</button>
              <button className="button muted-button">Delete</button>
            </td>
          </tr>
        ))
      ) : (
        <tr>
          <td colSpan={3}>No users</td>
        </tr>
      )}
    </tbody>
  </table>
)

export default UserTable

稍后我们将介绍编辑和删除按钮。现在已经建立了基本视图，让我们开始添加功能。

添加新用户

我们将设置表单以添加新用户。

我们可以做的第一件事是创建实际功能，该功能将新用户添加到状态中。我们setUsers自动提供了来自的功能useState，因此我们将使用它来更新用户状态。

由于我们没有使用可能具有自动递增ID的真实API和数据库，因此，我将手动增加新用户的ID。该函数将一个user对象作为参数，并将它们添加到users对象数组中。该...users代码确保所有先前的用户都保留在数组中。

App.js

const addUser = (user) => {
  user.id = users.length + 1
  setUsers([...users, user])
}

我们将为此制作一个组件，因此我将继续在顶部添加对该组件的引用，并将该组件插入“添加用户”标题下。我们可以addUser()通过作为道具。当我们将其作为参考时，请确保不要包括括号-<AddUserForm addUser={addUser} />而不是<AddUserForm addUser={addUser()} />。

App.js

import React, { useState } from 'react'
import UserTable from './tables/UserTable'
import AddUserForm from './forms/AddUserForm'

const App = () => {
  const usersData = [
    { id: 1, name: 'Tania', username: 'floppydiskette' },
    { id: 2, name: 'Craig', username: 'siliconeidolon' },
    { id: 3, name: 'Ben', username: 'benisphere' },
  ]

  const [users, setUsers] = useState(usersData)

  const addUser = (user) => {
    user.id = users.length + 1
    setUsers([...users, user])
  }

  return (
    <div className="container">
      <h1>CRUD App with Hooks</h1>
      <div className="flex-row">
        <div className="flex-large">
          <h2>Add user</h2>
          <AddUserForm addUser={addUser} />
        </div>
        <div className="flex-large">
          <h2>View users</h2>
          <UserTable users={users} />
        </div>
      </div>
    </div>
  )
}

export default App

现在，我们必须创建一个可用于添加新用户的表单。让我们创建一个forms子目录，其中包含一个名为的文件AddUserForm.js。

AddUserForm.js

import React, { useState } from 'react'

const AddUserForm = (props) => {
  return (
    <form>
      <label>Name</label>
      <input type="text" name="name" value="" />
      <label>Username</label>
      <input type="text" name="username" value="" />
      <button>Add new user</button>
    </form>
  )
}

export default AddUserForm

目前，该表单为空，由于我们的值字符串为空，因此您无法向其中添加任何值，提交按钮也不会执行任何操作。

与以前一样，我们将要设置一些状态，只是该状态只是临时的，以便跟踪添加用户表单中当前的内容。

我将使用这些空值创建一个初始状态，并将用户状态设置为空值。在变量中具有初始状态很有用，因为在提交表单后，我们可以将其返回为初始的空值。
AddUserForm.js

const initialFormState = { id: null, name: '', username: '' }
const [user, setUser] = useState(initialFormState)

现在，我们将创建一个函数来更新表单中的状态。event总是传递给onDOM中的任何事件，因此您将看到它作为函数的参数。对象解构将使我们能够轻松地从表单中获取name（key）value。最后，我们将像在App组件上一样对用户进行设置，除了这次我们使用计算的属性名称来动态设置名称（使用[name]）和值。

const handleInputChange = (event) => {
  const { name, value } = event.target

  setUser({ ...user, [name]: value })
}

如果您不了解正在传递的内容，请尝试console.log(event)在输入处理功能中进行尝试。

现在，我们从状态对象中提取值，并在onChange事件中引用我们的函数。

<form>
  <label>Name</label>
  <input
    type="text"
    name="name"
    value={user.name}
    onChange={handleInputChange}
  />
  <label>Username</label>
  <input
    type="text"
    name="username"
    value={user.username}
    onChange={handleInputChange}
  />
  <button>Add new user</button>
</form>

最后要注意的是实际上将表单提交回App组件。当我们使用传递函数时props，我们将使用道具来访问函数。我将编写一个onSubmit函数，我们将防止触发默认表单提交。我添加了一点验证，以确保不能提交空值，并将用户发送到add函数。最后，在成功提交后，我使用了setter将表单重置为其初始值。

<form
  onSubmit={event => {
    event.preventDefault()
    if (!user.name || !user.username) return

    props.addUser(user)
    setUser(initialFormState)
  }}
>

幸运的是，这段代码非常简单，因为我们不必担心异步API调用。

这是我们的全部AddUserForm内容。

AddUserForm.js

import React, { useState } from 'react'

const AddUserForm = (props) => {
  const initialFormState = { id: null, name: '', username: '' }
  const [user, setUser] = useState(initialFormState)

  const handleInputChange = (event) => {
    const { name, value } = event.target

    setUser({ ...user, [name]: value })
  }

  return (
    <form
      onSubmit={(event) => {
        event.preventDefault()
        if (!user.name || !user.username) return

        props.addUser(user)
        setUser(initialFormState)
      }}
    >
      <label>Name</label>
      <input
        type="text"
        name="name"
        value={user.name}
        onChange={handleInputChange}
      />
      <label>Username</label>
      <input
        type="text"
        name="username"
        value={user.username}
        onChange={handleInputChange}
      />
      <button>Add new user</button>
    </form>
  )
}

export default AddUserForm

删除用户

我们要解决的下一个问题是删除用户，这是最简单的功能。

在addUser中的下面App.js，我们将创建deleteUser，它将获取用户ID并将其从用户数组中过滤出来。

const deleteUser = (id) => {
  setUsers(users.filter((user) => user.id !== id))
}

我们通过道具将该功能传递给UserTable。

<UserTable users={users} deleteUser={deleteUser} />

现在我们要做的UserTable.js就是确保删除按钮调用该函数。

<button
  onClick={() => props.deleteUser(user.id)}
  className="button muted-button"
>
  Delete
</button>

现在，您可以删除部分或全部用户。

更新用户

难题的最后一步是引入更新现有用户的功能。这类似于添加用户，除了我们必须能够识别正在编辑的用户。在类组件中，我们将使用componentDidUpdate生命周期方法来实现此目的，但是现在我们将使用Effect Hook。该效果挂钩就像是componentDidMount和componentDidUpdate合并。

我们要构造的方式是为用户选择“编辑”操作时，“添加用户”表单将变为“编辑用户”表单，并且将使用所选用户的数据进行预填充。您可以取消编辑模式，也可以提交更改，这将更新所选用户并退出编辑模式。

让我们开始。在中App.js，我们要做的第一件事是使状态为是否打开编辑模式。它将开始为false。

App.js

const [editing, setEditing] = useState(false)

由于我们不知道正在编辑的对象是谁，因此我们将为表单创建初始的空白状态，就像添加表单一样。

const initialFormState = { id: null, name: '', username: '' }

我们需要一种查看和更新正在编辑的当前用户的人的方法，因此我们会将空用户应用于currentUser状态。

const [currentUser, setCurrentUser] = useState(initialFormState)

在用户上选择“编辑”后，它应打开编辑模式并设置当前用户，我们将在此editRow功能中执行此操作。

const editRow = (user) => {
  setEditing(true)

  setCurrentUser({ id: user.id, name: user.name, username: user.username })
}

现在，只需将该函数传递给UserTable我们就可以了deleteUser。

<UserTable users={users} editRow={editRow} deleteUser={deleteUser} />

在中UserTable.js，我们将user对象发送过来。

UserTable.js

<button
  onClick={() => {
    props.editRow(user)
  }}
  className="button muted-button"
>
  Edit
</button>

现在我们已完成所有设置-有一个用于编辑模式的开关，以及一个按钮，该按钮将在翻转编辑模式开关时使当前用户进入状态。

让我们创建在提交编辑表单时将调用的实际函数。与delete（按ID筛选出用户）或add（将用户追加到数组）不同，update函数需要映射到数组，并更新与所传递的ID相匹配的用户。

这意味着我们将使用两个参数-更新后的用户对象和id-并且我们将使用三元操作来映射用户并找到我们要更新的参数。

App.js

const updateUser = (id, updatedUser) => {
  setEditing(false)

  setUsers(users.map((user) => (user.id === id ? updatedUser : user)))
}

我们只需要自己制作编辑表单即可。

创建forms/EditUserForm.js。大部分将与添加表单相同。到目前为止，唯一的区别是我们将直接currentUser通过props设置状态。还有一个取消按钮，将仅关闭编辑模式。

EditUserForm.js

import React, { useState } from 'react'

const EditUserForm = (props) => {
  const [user, setUser] = useState(props.currentUser)

  const handleInputChange = (event) => {
    const { name, value } = event.target

    setUser({ ...user, [name]: value })
  }

  return (
    <form
      onSubmit={(event) => {
        event.preventDefault()

        props.updateUser(user.id, user)
      }}
    >
      <label>Name</label>
      <input
        type="text"
        name="name"
        value={user.name}
        onChange={handleInputChange}
      />
      <label>Username</label>
      <input
        type="text"
        name="username"
        value={user.username}
        onChange={handleInputChange}
      />
      <button>Update user</button>
      <button
        onClick={() => props.setEditing(false)}
        className="button muted-button"
      >
        Cancel
      </button>
    </form>
  )
}

export default EditUserForm

现在，我们必须将编辑表单放入中App.js，并创建一个切换以显示添加或编辑表单。

首先，引入组件。

App.js

import EditUserForm from './forms/EditUserForm'

然后创建切换。我们将使用三元运算来检查editing状态是否为true。如果为true，则显示编辑表单。如果为false，则显示添加表单。确保将我们创建的所有功能传递给编辑组件。

App.js

<div className="flex-large">
  {editing ? (
    <div>
      <h2>Edit user</h2>
      <EditUserForm
        setEditing={setEditing}
        currentUser={currentUser}
        updateUser={updateUser}
      />
    </div>
  ) : (
    <div>
      <h2>Add user</h2>
      <AddUserForm addUser={addUser} />
    </div>
  )}
</div>

好的，因此此时单击“编辑”按钮应该可以切换编辑模式，并且您应该能够更新用户。但是，我们完成了吗？

Using the Effect Hook

如果您稍作改动，则会注意到一个问题。二，实际上。如果您开始编辑一个用户，然后尝试切换到另一用户，则不会发生任何事情。为什么？好了，该组件已经打开，并且尽管父级上的状态已更改，但尚未注册到props。

这就是效果钩的位置。我们想让EditUserForm组件知道道具已经更改，这是我们之前使用所做的componentDidUpdate。

第一步是引入useEffect。

EditUserForm.js

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

EditUserForm.js

useEffect(() => {
  setUser(props.currentUser)
}, [props])

在效果挂钩中，我们创建了一个回调函数，该回调函数user使用正在发送的新道具来更新状态。之前，我们需要进行比较if (prevProps.currentUser !== this.state.currentUser)，但是有了效果钩，我们就可以[props]通过它来告知我们正在观看道具。

使用[props]数组类似于使用componentDidUpdate。如果您正在执行类似的一次性事件componentDidMount，则可以[]改为传递一个空数组（）。

现在，如果您尝试更改要编辑的用户，它将可以正常工作！

我说过这里有两个问题，另一个问题是您可以在用户当前正在编辑时删除它。我们可以通过添加setEditing(false)到中的deleteUser函数来解决此问题App.js。

就是这样。我们有一个完整的CRUD应用程序，利用React State和Effect挂钩。

结论

我没有深入介绍Hooks的所有用例，也没有深入介绍所有功能，但是我尝试提供一个完整的，尽管简单的React程序的实用示例。有关与钩子有关的所有事情的完整FAQ，请查看钩子FAQ。

如果您在一路上迷路了，别忘了查看演示和源代码。

接下来要注意的是Suspense API。

本文：React钩子构建CRUD应用,React Hooks CRUD应用, Build a CRUD App in React with Hooks

Tags:Build a CRUD App in React with Hooks, React Hooks CRUD应用, React钩子构建CRUD应用

Just Code

React钩子构建CRUD应用,React Hooks CRUD应用, Build a CRUD App in React with Hooks

先决条件

目标

创建React应用

初始设置

State vs. Hook State

设置视图

添加新用户

删除用户

更新用户

Using the Effect Hook

结论

About Author

Gideon

Add a Comment

先决条件

目标

创建React应用

初始设置

State vs. Hook State

设置视图

添加新用户

删除用户

更新用户

Using the Effect Hook

结论

Related Posts

Related Posts

About Author

Gideon

Add a Comment