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

效果图： 目录结构：（目分为主页面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([

{

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) => item

文章来源

 您阅读本篇文章共花了：