react+hook函数组件实现表单添加数据，表格展现

姜姜锵锵#

已于 2022-07-19 15:21:35 修改

阅读量1.4k

点赞数

文章标签： react.js typescript

于 2022-07-19 15:06:39 首次发布

本文链接：https://blog.csdn.net/qq_45849232/article/details/125872248

版权

本文展示了如何在React应用中利用Hook函数组件实现表单数据的添加和表格显示。通过主页面引入表格组件和添加书籍组件，主页面负责传递添加和删除事件。表格组件用于展示数据，而添加书籍组件则包括了表单校验、获取表单值以及数据添加后的清空处理，使用了Form.useForm()进行表单管理。

摘要由CSDN通过智能技术生成

效果图：
在这里插入图片描述
目录结构：（目分为主页面BookTable,以及两个组件，表格组件和添加书籍组件）

主页面：主要是将两个组件引入进页面，并将添加书籍事件、删除书籍事件传递给子组件，由子组件触发。

import styles from './index.less';
import React, {
    useState, useEffect } from 'react';
import {
   PageContainer} from '@ant-design/pro-components';
import BookList from '@/components/BookTable/index';
import AddBook from '@/components/AddBook/index';
import {
   DataType} from '@/components/BookTable';
import {
   BookType} from '@/components/AddBook';
import {
   cloneDeep} from 'lodash';
const BookTable: React.FC = () => {
   
    const [tableData, setTableData] = useState<DataType[]>([
        {
   
            id:1,
            title:'水浒传',
            author:'施耐庵',
            price:'30'
        },
        {
   
            id:2,
            title:'西游记',
            author:'罗贯中',
            price:'20'
        },
        {
   
            id:3,
            title:'红楼梦',
            author:'曹雪芹',
            price:'23'
        }
    ]);
    function deleteBook(obj:DataType){
   
        const data:DataType[]= tableData.filter((item:DataType) =