使用 React 在 SPA 中创建表格

阅读时长 13 分钟读完

React 是当前最流行的前端框架之一,可以非常方便地开发出高效的单页应用(SPA)。其中,对于数据的呈现与交互处理是至关重要的,而表格则是其中重要的一种形式。本文就介绍 React 中如何创建出具有优美样式效果和交互功能的表格,并提供示例代码。

1.准备工作

在开始编写代码之前,我们需要明确自己的需求和实现方案,包括表格数据、数据结构传递、表格样式和交互行为等。这里我们假设我们需要创建一张学生信息表格,可以实现对学生信息的增加、删除和修改操作,同时具有分页和排序功能。

在这里,我们选择使用 Material UI 组件库,它提供了众多表格相关组件以及一些基础表格的样式,可以使开发过程更加快捷和高效。首先,我们需要安装 Material UI 命令行工具,并生成一个带有基础依赖的 React 项目,以便快速引入 Material UI 组件库。

以上命令行操作完成后,我们可以在项目中看到我们需要使用的 Material UI 依赖已经引入了进来,接下来就可以开始编写代码了。

2.表格代码实现

静态表格

首先,我们来看如何创建出静态的表格,代码如下:

-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ ---------- ---------- --------- --------- - ---- --------------------

----- ------------ - -
  - --- -- ----- ----- ---- --- ------- --- --
  - --- -- ----- ----- ---- --- ------- --- --
  - --- -- ----- ----- ---- --- ------- --- --
--

----- ------------- - -- -- -
  ------ -
    -------
      -----------
        ----------
          -------------------------
          -------------------------
          -------------------------
          -------------------------
        -----------
      ------------
      -----------
        --------------------------- -- -
          --------- -----------------
            -----------------------------------
            -------------------------------------
            ------------------------------------
            ---------------------------------------
          -----------
        ---
      ------------
    --------
  --
--

------ ------- --------------

这里,我们首先引入了 Material UI 中的一些基本表格组件,包括 TableTableHeadTableBodyTableRowTableCell。然后,定义了一个包含学生信息的数据数组 studentsData,并在组件中使用了该数据进行表格的渲染,只需要对数据进行遍历即可实现数据渲染。

动态表格

接下来,我们来实现动态表格,即实现增加、删除和修改学生信息的功能。这里我们需要使用 React 中的状态钩子——useState,并定义一些函数实现表格的增、删、改操作。

-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ---------- - ---- --------------------
------ - ------- ---- - ---- ---------------------

----- ------------- - -- -- -
  ----- -------------- ---------------- - ----------
    - --- -- ----- ----- ---- --- ------- --- --
    - --- -- ----- ----- ---- --- ------- --- --
    - --- -- ----- ----- ---- --- ------- --- --
  ---
  ----- ------------ -------------- - ----------------
  ----- --------- ----------- - ----------
    --- ---
    ----- ---
    ---- ---
    ------- ---
  ---
  ----- ---------- ------------ - ---------------

  -- ------
  ----- --------------- - ------- -- -
    -----------------------
    ----- ---------- - -
      --- ------------------- - --
      ----- -------------
      ---- ------------
      ------- ---------------
    --
    --------------------------------- -------------
    ------------ --- --- ----- --- ---- --- ------- -- ---
  --

  -- ------
  ----- ----------------- - ---- -- -
    --------------------------------------------- -- ---------- --- -----
  --

  -- ------
  ----- ------------------- - --------- -- -
    --------------------
    ---------------------
  --

  -- ------
  ----- ------------------- - -- -- -
    ---------------------
    ------------------
  --

  -- ------
  ----- --------------- - -- -- -
    ----- --------------- - -------------------------- --
      ---------- --- ----------- - -------- - -------
    --
    ---------------------------------
    ---------------------
    ------------------
  --

  -- ----
  ----- ----------------- - -- -- -
    ---------------------
    ------------------
  --

  -- ------
  ----- -------------------- - ------- -- -
    ----- - ----- ----- - - -------------
    ------------- ------------ ------- ----- ---
  --

  -- --------
  ----- ------------------- - ------- -- -
    ----- - ----- ----- - - -------------
    ------------ ----------- ------- ----- ---
  --

  ------ -
    -------
      -----------
        ----------
          -------------------------
          -------------------------
          -------------------------
          -------------------------
          -------------------------
        -----------
      ------------
      -----------
        --------------------------- -- -
          --------- -----------------
            -----------------------------------
            ----------- -- -------- -- ----------- --- ---------- - -
              --
                -----------
                  ------
                    -----------
                    -----------
                    ---------------------
                    -------------------------------
                  --
                ------------
                -----------
                  ------
                    -------------
                    ----------
                    --------------------
                    -------------------------------
                  --
                ------------
                -----------
                  ------
                    -----------
                    -------------
                    -----------------------
                    -------------------------------
                  --
                ------------
                -----------
                  ----------- -----------------------------------------
                  ----------- -------------------------------------------
                ------------
              ---
            - - -
              --
                -------------------------------------
                ------------------------------------
                ---------------------------------------
                -----------
                  ----------- ----------- -- ------------------------------
                    ----- --
                  -------------
                  ----------- ----------- -- -------------------------------
                    ------- --
                  -------------
                ------------
              ---
            --
          -----------
        ---
        ----------
          -----------
            ------
              -----------
              ---------
              ------------------
              ------------------------------
            --
          ------------
          -----------
            ------
              -----------
              -----------
              --------------------
              ------------------------------
            --
          ------------
          -----------
            ------
              -------------
              ----------
              -------------------
              ------------------------------
            --
          ------------
          -----------
            ------
              -----------
              -------------
              ----------------------
              ------------------------------
            --
          ------------
          -----------
            ----------- -----------------------------------------
          ------------
        -----------
      ------------
    --------
  --
--

------ ------- --------------

以上代码中,我们首先定义了一个 studentsData 状态变量,包含了学生信息的数组。然后,我们定义了一组状态变量,用于存储当前组件的状态,包括编辑模式下的表单状态、新增操作状态等。接着,我们定义了一些函数,来实现表格的交互操作,包括新增、删除、编辑、保存以及取消操作。

具体来说,当用户点击新增按钮时,会触发提交表单的函数 handleAddSubmit。此函数会先确认表单中的值,然后将新的学生信息添加到 studentsData 变量中。当用户点击删除按钮时,我们可以使用内建的 filter 函数过滤出需要删除的数据项。

当用户点击修改按钮时,将进入编辑模式,此时表格中的内容将被替换为一个表单,行为和新增表单相似,但是需要对当前行的数据进行预先填充。当用户点击保存时,我们将编辑后的数据保存回原始数据中,并退出编辑模式。当用户点击取消时,则直接退出编辑模式。

3.补充内容

以上代码只是表格实现的一个基本样例,具体实现还有很多细节需要完善,例如:分页功能、排序功能、样式优化、数据结构设计等,不过本文所描述的演示即可做为参考。

4.示例代码

示例代码已经放在了 Github 上,有需要的读者可以进行下载查看:

5.总结

本文中,我们介绍了 React 中如何利用 Material UI 创建具有交互功能的表格。通过上述示例代码的说明,读者应该可以对 React 开发中的数据结构梳理、组件编写、状态钩子使用等有了更全面的认识。而对于项目实际需求,则需要读者结合各自的实际情况进行深入思考和实践。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6456181e968c7c53b095d542

纠错
反馈