react+antd实现动态编辑表格数据
短信预约 -IT技能 免费直播动态提醒
本文实例为大家分享了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总结
这篇博文就简单的分享到这里，这里只是一个基础。学会了这个还可以根据这个属性造很多自己的轮子。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
