摘要：
最近做需求,需要在一个表格里编辑字段,验证提交.项目用的是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',
'45%',
},
{
title: '业务字段内容',
dataIndex: 'value',
editable: true,
render: (_, record: any) =>(
<>
<input
style={{ '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 = falsesourceData.some((item: any) =>{
const obj ={ ...item }
if (!item.value) {
obj.errorFiled = trueflag = 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:1pxsolid#ff4d4f;
}
.tabletip{
color:#ff4d4f;
}