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