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

本文实例为大家分享了react+antd动态编辑表格数据的具体代码，供大家参考，具体内容如下

在项目中，我们会遇到一种需求，为用户提供一份表格去编辑，而且表格中各个单元格是相关影响的，因此在一个单元格中编辑过会影响另外一个单元格。

小需求

在一个表格中：

1.有两行数据，一行是数据1，一行是数据2；
2.而且只能数据1的单元格可以进行编辑;
3.只能输入数字，要是输入其他的，则显示编辑之前的数值
4. 当数据1的那行数据发生改变的时候，数据2对应的单元格的数据也会自动加1

例子图片

示例代码

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

总结

这篇博文就简单的分享到这里，这里只是一个基础。学会了这个还可以根据这个属性造很多自己的轮子。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易盾网络。