react.js antd-table 可編輯表格驗證

最近做需求,需要在一個表格里編輯字段,驗證提交.項目用的是antd的組件,看了下table組件,官網有給編輯的例子,好咧,拿過來用了下,發現問題.官網的實現寫得很復雜,而且最主要的一點是只能在輸入框獲取焦點時調驗證規則.但是在表格外面不能調用驗證方法調用.與實際需求不符合,於是自己寫了一個,記錄下來.

 

需求: 表格輸入時驗證字段,提交時點擊驗證字段

 

主要思路: 先寫好字段驗證錯誤的樣式,設置一個字段,通過字段動態增加樣式來實現驗證提示的效果

這個表格是放在一個彈框里的,彈框組件

updateForm.tsx

import React, { useState, useEffect } from 'react'
import { Form, Button, Input, Modal, Select, Row, Col, DatePicker, Table } from 'antd'
import styles from './style.less'


const UpdateForm: React.FC = (props) => {
  const [sourceData, setSourceData] = useState([])

  const {
    onSubmit: handleUpdate,
    onCancel: handleUpdateModalVisible,
    updateModalVisible,
  } = props

  // 獲取表格字段填寫的值
  const changeValue = (e: any, row: any) => {
    const newData = [...sourceData]
    const index = newData.findIndex(item => row.fieldCode === item.fieldCode)
    const item = newData[index]
    item.value = e.target.value
    if (item.value) { // 通過errorFiled這個字段來判斷當前的輸入是否通過校驗
      item.errorFiled = false
    } else {
      item.errorFiled = true
    }
    newData.splice(index, 1, {
      ...item,
    })
    setSourceData(newData)
  }

  const columns = [
    {
      title: '業務字段名稱',
      dataIndex: 'fieldName',
      width: '45%',
    },
    {
      title: '業務字段內容',
      dataIndex: 'value',
      editable: true,
      render: (_, record: any) => (
        <>
          <input
            style={{ width: '90%' }}
            className={`${record.errorFiled ? styles.errorinput : ''} ${styles.tableinput}`}
            onChange={(e) => changeValue(e, record)}
            value={record.value}
          />
          <div style={{ display: record.errorFiled ? 'block' : 'none' }} className={styles.tabletip}>{record.fieldName}必填</div>
        </>
      ),
    },
  ]

  const sourceData = [
    {
      key: '0',
      fieldName: '電票質押合同編號',
      value: '',
    },
    {
      key: '1',
      fieldName: '電票票號',
      value: '',
    },
    {
      key: '2',
      fieldName: '借款人名稱',
      value: '',
    },
  ]
  setSourceData(sourceData)  // 如果表格數據是后台獲取,也是一樣的,得到數據后使用setSourceData賦值

   // 提交用戶信息
  const handleSubmit = () => {
    const fieldsValue = {}
    // 提交時驗證一下表格里的數據
    const newData = []
    let flag = false
    sourceData.some((item: any) => {
      const obj = { ...item }
      if (!item.value) {
        obj.errorFiled = true
        flag = true
      }
      newData.push(obj)
    })
    if (flag) {
      setSourceData(newData)
      return
    }

    fieldsValue.businessFields = sourceData
    console.log(234, sourceData)
    handleUpdate(fieldsValue) // 傳值給父組件
  }

  const renderFooter = () => {
    return (
      <>
        <Button onClick={() => handleUpdateModalVisible()}>取消</Button>
        <Button onClick={handleSubmit}>確定</Button>
      </>
    )
  }

  return (
    <Modal
      width={840}
      bodyStyle={{ padding: '32px 40px 48px' }}
      destroyOnClose
      title='添加增信品種'
      visible={updateModalVisible}
      footer={renderFooter()}
      maskClosable={false}
      onCancel={() => handleUpdateModalVisible()}
    >
      <>
        <Table
          bordered
          dataSource={sourceData}
          columns={columns}
          pagination={false}
          rowKey='fieldCode'
          style={{ maxHeight: '350px', overflow: 'auto' }}
        />
      </>
    </Modal>
  )
}

export default UpdateForm

 

父組件調用

father.tsx

 

import CreateForm from './components/CreateForm'

const TableList: React.FC<{}> = () => {
  const [createModalVisible, handleModalVisible] = useState<boolean>(false)

  return (
    <div>
      <Button type='primary' onClick={() => {
        handleModalVisible(true)
      }}>
        新建
      </Button>
      <CreateForm
        onCancel={() => handleModalVisible(false)}
        onConfirm={(value) => {
          // 提交事件
        }}
        modalVisible={createModalVisible}
      />
    </div>
  )
}

 

樣式文件

style.less

.tableinput {

  padding-left: 6px;

}

.errorinput {

 border: 1px solid #ff4d4f;

}

.tabletip {

  color: #ff4d4f;

}