react+antd实现动态编辑表格数据

import React, { useState } from 'react';
import {Table, Typography, message} from 'antd'
const { Paragraph } = Typography;
function Index(props){

  // 判断是否时数字
  function isNumber(val){
      var regPos = /^\d+(\.\d+)?$/; //非负浮点数
      var regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/; //负浮点数
      if(regPos.test(val) || regNeg.test(val)){
          return true;
      }else{
          return false;
      }
  }
  // 表格数据源
  const [ data , setData ] = useState([
    {
      'num1':1
    },
    {
      'num1':2
    },
    {
      'num1':3
    },
    {
      'num1':4
    },
    {
      'num1':5
    }
  ])
  // 定义表头
  const columns = [
    {
      title: '数据1',
      dataIndex: 'num1',
      key: 'num1',
      render: (text, record, index) => (
          <Paragraph editable={{onChange:(value)=>{
            let date = 0
            // 这里是:只能输入数字，要是输入其他的值，则提示并且显示编辑之前的值
            if(isNumber(value)){
                date = value
            }else{
                if(value != ''){
                    message.warn('只能输入数字')
                }
                date = data[index]['num1']
            }
            // 处理表格中的值，使得动态更新表格中的值
            let obj = [...data]
            setData([])
            obj[index]['num1'] = parseInt(date)
            setData(obj)
          }}} value={text}>{text}</Paragraph>
      ),
    },
    {
      title: '数据2',
      dataIndex: 'num2',
      key: 'num2',
      render: (text, record, index) => (
          <span>{record['num1'] + 1}</span>
      ),
    },
  ]


  return (
    <div>
        <Table dataSource={data} columns={columns} />
    </div>
  )

}

export default Index