react 封装表格组件_React+Antd封装的简易的编辑表格

前言

因为项目需要，需要一个可编辑的表格，但是Antd中提供的可编辑表格实在是太繁琐，使用起来实在是太不友好了，所以自己就写了一个简易的编辑表格组件。

第一步

首先，在项目中创建一个EditTable.tsx的文件;在文件中引入需要的模块；

PS:本人使用的React Hook + TypeScript来进行开发的；

import React, { useState, useEffect } from 'react';

import { Table, Form, message, Input } from 'antd'; //需要的antd的组件

import { FormComponentProps } from 'antd/lib/form';

import { ColumnProps } from 'antd/lib/table';

import { dataItemType } from './interface'; //定义

/**

* 定义需要的数据的类型

*/

interface EditTableProps extends FormComponentProps {

dataSource: dataItemType[];

loading: boolean;

}

第二步

编写组件

const EditTable: React.FC = ({loading, dataSource, form: {getFieldDecorator}}) => {

const [editData, setEditDa