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;

}