React 是当前最流行的前端框架之一,可以非常方便地开发出高效的单页应用(SPA)。其中,对于数据的呈现与交互处理是至关重要的,而表格则是其中重要的一种形式。本文就介绍 React 中如何创建出具有优美样式效果和交互功能的表格,并提供示例代码。
1.准备工作
在开始编写代码之前,我们需要明确自己的需求和实现方案,包括表格数据、数据结构传递、表格样式和交互行为等。这里我们假设我们需要创建一张学生信息表格,可以实现对学生信息的增加、删除和修改操作,同时具有分页和排序功能。
在这里,我们选择使用 Material UI 组件库,它提供了众多表格相关组件以及一些基础表格的样式,可以使开发过程更加快捷和高效。首先,我们需要安装 Material UI 命令行工具,并生成一个带有基础依赖的 React 项目,以便快速引入 Material UI 组件库。
$ npm install -g create-react-app $ create-react-app my-project $ cd my-project $ npm install @material-ui/core @material-ui/icons
以上命令行操作完成后,我们可以在项目中看到我们需要使用的 Material UI 依赖已经引入了进来,接下来就可以开始编写代码了。
2.表格代码实现
静态表格
首先,我们来看如何创建出静态的表格,代码如下:
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------ ---------- ---------- --------- --------- - ---- -------------------- ----- ------------ - - - --- -- ----- ----- ---- --- ------- --- -- - --- -- ----- ----- ---- --- ------- --- -- - --- -- ----- ----- ---- --- ------- --- -- -- ----- ------------- - -- -- - ------ - ------- ----------- ---------- ------------------------- ------------------------- ------------------------- ------------------------- ----------- ------------ ----------- --------------------------- -- - --------- ----------------- ----------------------------------- ------------------------------------- ------------------------------------ --------------------------------------- ----------- --- ------------ -------- -- -- ------ ------- --------------
这里,我们首先引入了 Material UI 中的一些基本表格组件,包括 Table
、TableHead
、TableBody
、TableRow
和 TableCell
。然后,定义了一个包含学生信息的数据数组 studentsData
,并在组件中使用了该数据进行表格的渲染,只需要对数据进行遍历即可实现数据渲染。
动态表格
接下来,我们来实现动态表格,即实现增加、删除和修改学生信息的功能。这里我们需要使用 React 中的状态钩子——useState
,并定义一些函数实现表格的增、删、改操作。
-- -------------------- ---- ------- ------ ------ - -------- - ---- -------- ------ - ---------- - ---- -------------------- ------ - ------- ---- - ---- --------------------- ----- ------------- - -- -- - ----- -------------- ---------------- - ---------- - --- -- ----- ----- ---- --- ------- --- -- - --- -- ----- ----- ---- --- ------- --- -- - --- -- ----- ----- ---- --- ------- --- -- --- ----- ------------ -------------- - ---------------- ----- --------- ----------- - ---------- --- --- ----- --- ---- --- ------- --- --- ----- ---------- ------------ - --------------- -- ------ ----- --------------- - ------- -- - ----------------------- ----- ---------- - - --- ------------------- - -- ----- ------------- ---- ------------ ------- --------------- -- --------------------------------- ------------- ------------ --- --- ----- --- ---- --- ------- -- --- -- -- ------ ----- ----------------- - ---- -- - --------------------------------------------- -- ---------- --- ----- -- -- ------ ----- ------------------- - --------- -- - -------------------- --------------------- -- -- ------ ----- ------------------- - -- -- - --------------------- ------------------ -- -- ------ ----- --------------- - -- -- - ----- --------------- - -------------------------- -- ---------- --- ----------- - -------- - ------- -- --------------------------------- --------------------- ------------------ -- -- ---- ----- ----------------- - -- -- - --------------------- ------------------ -- -- ------ ----- -------------------- - ------- -- - ----- - ----- ----- - - ------------- ------------- ------------ ------- ----- --- -- -- -------- ----- ------------------- - ------- -- - ----- - ----- ----- - - ------------- ------------ ----------- ------- ----- --- -- ------ - ------- ----------- ---------- ------------------------- ------------------------- ------------------------- ------------------------- ------------------------- ----------- ------------ ----------- --------------------------- -- - --------- ----------------- ----------------------------------- ----------- -- -------- -- ----------- --- ---------- - - -- ----------- ------ ----------- ----------- --------------------- ------------------------------- -- ------------ ----------- ------ ------------- ---------- -------------------- ------------------------------- -- ------------ ----------- ------ ----------- ------------- ----------------------- ------------------------------- -- ------------ ----------- ----------- ----------------------------------------- ----------- ------------------------------------------- ------------ --- - - - -- ------------------------------------- ------------------------------------ --------------------------------------- ----------- ----------- ----------- -- ------------------------------ ----- -- ------------- ----------- ----------- -- ------------------------------- ------- -- ------------- ------------ --- -- ----------- --- ---------- ----------- ------ ----------- --------- ------------------ ------------------------------ -- ------------ ----------- ------ ----------- ----------- -------------------- ------------------------------ -- ------------ ----------- ------ ------------- ---------- ------------------- ------------------------------ -- ------------ ----------- ------ ----------- ------------- ---------------------- ------------------------------ -- ------------ ----------- ----------- ----------------------------------------- ------------ ----------- ------------ -------- -- -- ------ ------- --------------
以上代码中,我们首先定义了一个 studentsData
状态变量,包含了学生信息的数组。然后,我们定义了一组状态变量,用于存储当前组件的状态,包括编辑模式下的表单状态、新增操作状态等。接着,我们定义了一些函数,来实现表格的交互操作,包括新增、删除、编辑、保存以及取消操作。
具体来说,当用户点击新增按钮时,会触发提交表单的函数 handleAddSubmit
。此函数会先确认表单中的值,然后将新的学生信息添加到 studentsData
变量中。当用户点击删除按钮时,我们可以使用内建的 filter
函数过滤出需要删除的数据项。
当用户点击修改按钮时,将进入编辑模式,此时表格中的内容将被替换为一个表单,行为和新增表单相似,但是需要对当前行的数据进行预先填充。当用户点击保存时,我们将编辑后的数据保存回原始数据中,并退出编辑模式。当用户点击取消时,则直接退出编辑模式。
3.补充内容
以上代码只是表格实现的一个基本样例,具体实现还有很多细节需要完善,例如:分页功能、排序功能、样式优化、数据结构设计等,不过本文所描述的演示即可做为参考。
4.示例代码
示例代码已经放在了 Github 上,有需要的读者可以进行下载查看:
https://github.com/hainuo/react-table-demo.git
5.总结
本文中,我们介绍了 React 中如何利用 Material UI 创建具有交互功能的表格。通过上述示例代码的说明,读者应该可以对 React 开发中的数据结构梳理、组件编写、状态钩子使用等有了更全面的认识。而对于项目实际需求,则需要读者结合各自的实际情况进行深入思考和实践。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6456181e968c7c53b095d542