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<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) => item.id !== obj.id);setTableData(data);}function addBook(obj:BookType){const addObj:DataType={id: tableData.length? tableData[tableData.length - 1]?.id + 1: 1,...obj}const data:DataType[]=cloneDeep(tableData);data.push(addObj)setTableData(data)}return (<PageContainer ghost>//可以去掉，不是必须的<div className={styles.container}><BookList tableData={tableData} deleteBook={deleteBook}/><AddBook addBook={addBook}/></div></PageContainer>);
};export default BookTable;

表格组件：

import React, { useState } from 'react'
import type { ColumnsType } from 'antd/es/table';
import {Table,Button} from 'antd'export interface DataType {id: number;title: string;author: string;price: string;
}interface BookTableProps{tableData:DataType[],deleteBook:Function
}const BookTable: React.FC<BookTableProps> = (props) => {const {tableData,deleteBook}=props;const columns: ColumnsType<DataType> = [{title: '书名',dataIndex: 'title',key: 'title',},{title: '作者',dataIndex: 'author',key: 'author',},{title: '价格',dataIndex: 'price',key: 'price',},{title: '操作',key: 'action',width:'200',render: (_, record) => (<Button type='primary' size="middle" onClick={()=>deleteBook(record)}>删除</Button>),},];return (<Table columns={columns} dataSource={tableData} rowKey="id" pagination={false} scroll={{ y: 300 }} />)
};export default BookTable;

添加书籍组件：
主要是对form进行数据的校验和获取表单数据getFieldsValue，以及更改表单数据setFieldsValue（对数据进行添加后，清空处理）。
const [form]=Form.useForm();

import React, { useState } from 'react'
import {Form, Input,Button} from 'antd'
import './index.less'
export interface BookType {title:string,author:string,price:string
}
interface AddBookProps{addBook:Function
}
const AddBook: React.FC<AddBookProps> = (props) => {const {addBook}=props;const [form]=Form.useForm();const formTmp=[{label:"书名",name:"title",rules: [{required: true, message: '请输入书籍名称!'}]},{label:"作者",name:"author",rules: [{required: true, message: '请输入作者名称!'}]},{label:"价格",name:"price",rules: [{required: true, message: '请输入价格!'}]}]function btnClick(){form.validateFields().then(async values => {addBook(form.getFieldsValue())form.setFieldsValue({title:'',author:'',price:''})}).catch(info => {console.log('Validate Failed:', info);})}return (<div className='addBox'><div className='title'>添加书籍</div><Formname="basic"size='large'form={form}initialValues={{ remember: true }}autoComplete="off"layout='vertical'>{formTmp.map(item=>(<Form.Itemkey={item.name}label={item.label}name={item.name}rules={item.rules}><Input /></Form.Item>))}<Form.Item><Button type="primary" onClick={()=>btnClick()}>添加</Button></Form.Item></Form></div>)
};export default AddBook;

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

vue表单的数据验证
1.在el-form中通过属性:rules进行绑定,它的值为验证规则对象rules <el-form :model="ruleForm" :rules="rules ...
使用 Netlify Forms 将联系表单添加到 React 应用程序
将联系表单添加到 React 应用程序可能需要编写服务器端代码来处理表单提交,但是使用 Netlify Forms,您可以从逻辑中解脱出来,因为当您的网站运行时,它会为您完成所有幕后工作部署在Net ...
《uni-app》表单组件-form表单
本文分享的Form组件为uni-app的内置组件Form,非扩展组件,两者在用法上其实大同小异,只是扩展组件的属性以及事件更多-没有本质上的区别- <uni-app>表单组件-form表单 ...
html表单输入框添加验证码,织梦Dedecms为自定义表单添加验证码功能
使用织梦Dedecms自定义表单的时候,即使你做了字段的验证,也很有可能被人刷很多垃圾的内容,更加安全的一个方法是为自定义表单添加上验证码功能.今天我就来为大家分享一下怎样给自定义表单添加验证码! 一 ...
php v9 上传_phpcms v9 表单添加文件上传字段
phpcms v9 表单添加文件上传字段 1.打开目录 ./phpcms/modules/content/fields/ ;把文件夹downfile,拷贝到目录./phpcms/modules/fo ...
web元件库/常用web组件/常用表单/导航栏/边框/图标/日期时间选择器/评分组件/穿梭框/输入框/步骤条/计数器/输入框/Axure原型/axure元件库/rp原型/交互控件/五星评分器/导航框架
web元件库/axure元件库/常用web组件/常用表单/导航栏/边框/图标/日期时间选择器/评分组件/穿梭框/输入框/步骤条 /交互控件:单/多选框.输入框.计数器.选择器.级联选择.滑动开关.滑块 ...
web元件库/axure元件库/常用web组件/常用表单/导航栏/边框/图标/日期时间选择器/评分组件/穿梭框/输入框/步骤条/
web元件库/axure元件库/常用web组件/常用表单/导航栏/边框/图标/日期时间选择器/评分组件/穿梭框/输入框/步骤条/ Axure原型演示及下载地址请点击:https://www.pmdan ...
React+ant中的Form表单的刷新
我们使用ant组件库的Form表单提交之后不刷新整个页面,表单中的内容有时候是不会刷新,如何解决这个问题? 首先定义一个[form]通过 Form.useForm 对表单数据域进行交互, const ...
HTML form表单添加enctype属性后获取不到input值
HTML form表单添加enctype属性后获取不到input值问题如图所示, 在servlet中输出获取的属性值,发现全部为null 最后结论 enctype修改了form表单提交时的格式,不再 ...

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

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

最新文章

热门文章