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

总结

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

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

查看更多关于react+antd实现动态编辑表格数据的详细内容...