React结合antd5实现整个表格编辑

通过react hooks 结合antd的table实现整个表格新增编辑。

引入组件依赖

import React, {
    useState } from 'react';
import {
    Table, InputNumber, Button, Space, Input } from 'antd';

定义数据

const originData = [
  {
    key: 1, name: '白银会员', value: 0, equity: 0, reward: 0 },
  {
    key: 2, name: '黄金会员', value: 500, equity: 2, reward: 1 },
  {
    key: 3, name: '钻石会员', value: 1000, equity: 4, reward: 1 },
  {
    key: 4, name: '至尊会员', value: 1500, equity: 1, reward: 0 },
];

编辑表格时触发（函数体外）

const EditableCell = ({
    
  dataIndex,
  rowIndex,
  title,
  record,
  index,
  children,
  isEdit,
  data,
  handChange,
  ...restProps
}) => {