react.js antd-table 可编辑表格验证
<div><div>最近做需求,需要在一个表格里编辑字段,验证提交.项目用的是antd的组件,看了下table组件,官网有给编辑的例子,好咧,拿过来用了下,发现问题.官网的实现写得很复杂,而且最主要的一点是只能在输入框获取焦点时调验证规则.但是在表格外面不能调用验证方法调用.与实际需求不符合,于是自己写了一个,记录下来.</div>
<div> </div>
<div><span style="color: rgba(255, 0, 0, 1)">需求: 表格输入时验证字段,提交时点击验证字段</span></div>
<div><span style="color: rgba(255, 0, 0, 1)"><img src="https://img2020.cnblogs.com/blog/1349812/202006/1349812-20200603164008496-215892254.png"></span></div>
<div> </div>
<div><span style="color: rgba(255, 0, 0, 1)">主要思路: 先写好字段验证错误的样式,设置一个字段,通过字段动态增加样式来实现验证提示的效果</span></div>
<br>
<div>这个表格是放在一个弹框里的,弹框组件</div>
<div>
<div>updateForm.tsx</div>
<div>
<div class="cnblogs_code">
<pre>import React, { useState, useEffect } from 'react'<span style="color: rgba(0, 0, 0, 1)">
import { Form, Button, Input, Modal, Select, Row, Col, DatePicker, Table } from </span>'antd'<span style="color: rgba(0, 0, 0, 1)">
import styles from </span>'./style.less'<span style="color: rgba(0, 0, 0, 1)">
const UpdateForm: React.FC </span>= (props) =><span style="color: rgba(0, 0, 0, 1)"> {
const </span>=<span style="color: rgba(0, 0, 0, 1)"> useState([])
const {
onSubmit: handleUpdate,
onCancel: handleUpdateModalVisible,
updateModalVisible,
} </span>=<span style="color: rgba(0, 0, 0, 1)"> props
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 获取表格字段填写的值</span>
const changeValue = (e: any, row: any) =><span style="color: rgba(0, 0, 0, 1)"> {
const newData </span>=<span style="color: rgba(0, 0, 0, 1)"> [...sourceData]
const index </span>= newData.findIndex(item => row.fieldCode ===<span style="color: rgba(0, 0, 0, 1)"> item.fieldCode)
const item </span>=<span style="color: rgba(0, 0, 0, 1)"> newData
item.value </span>=<span style="color: rgba(0, 0, 0, 1)"> e.target.value
</span><span style="color: rgba(0, 0, 255, 1)">if</span> (item.value) { <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 通过errorFiled这个字段来判断当前的输入是否通过校验</span>
item.errorFiled = <span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">
} </span><span style="color: rgba(0, 0, 255, 1)">else</span><span style="color: rgba(0, 0, 0, 1)"> {
item.errorFiled </span>= <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">
}
newData.splice(index, </span>1<span style="color: rgba(0, 0, 0, 1)">, {
...item,
})
setSourceData(newData)
}
const columns </span>=<span style="color: rgba(0, 0, 0, 1)"> [
{
title: </span>'业务字段名称'<span style="color: rgba(0, 0, 0, 1)">,
dataIndex: </span>'fieldName'<span style="color: rgba(0, 0, 0, 1)">,
width: </span>'45%'<span style="color: rgba(0, 0, 0, 1)">,
},
{
title: </span>'业务字段内容'<span style="color: rgba(0, 0, 0, 1)">,
dataIndex: </span>'value'<span style="color: rgba(0, 0, 0, 1)">,
editable: </span><span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">,
render: (_, record: any) </span>=><span style="color: rgba(0, 0, 0, 1)"> (
</span><>
<<span style="color: rgba(0, 0, 0, 1)">input
style</span>={{ width: '90%'<span style="color: rgba(0, 0, 0, 1)"> }}
className</span>={`${record.errorFiled ? styles.errorinput : ''<span style="color: rgba(0, 0, 0, 1)">} ${styles.tableinput}`}
onChange</span>={(e) =><span style="color: rgba(0, 0, 0, 1)"> changeValue(e, record)}
value</span>=<span style="color: rgba(0, 0, 0, 1)">{record.value}
</span>/>
<div style={{ display: record.errorFiled ? 'block' : 'none' }} className={styles.tabletip}>{record.fieldName}必填</div>
</>
<span style="color: rgba(0, 0, 0, 1)"> ),
},
]
const sourceData </span>=<span style="color: rgba(0, 0, 0, 1)"> [
{
key: </span>'0'<span style="color: rgba(0, 0, 0, 1)">,
fieldName: </span>'电票质押合同编号'<span style="color: rgba(0, 0, 0, 1)">,
value: </span>''<span style="color: rgba(0, 0, 0, 1)">,
},
{
key: </span>'1'<span style="color: rgba(0, 0, 0, 1)">,
fieldName: </span>'电票票号'<span style="color: rgba(0, 0, 0, 1)">,
value: </span>''<span style="color: rgba(0, 0, 0, 1)">,
},
{
key: </span>'2'<span style="color: rgba(0, 0, 0, 1)">,
fieldName: </span>'借款人名称'<span style="color: rgba(0, 0, 0, 1)">,
value: </span>''<span style="color: rgba(0, 0, 0, 1)">,
},
]
setSourceData(sourceData)</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 如果表格数据是后台获取,也是一样的,得到数据后使用setSourceData赋值</span>
<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 提交用户信息</span>
const handleSubmit = () =><span style="color: rgba(0, 0, 0, 1)"> {
const fieldsValue </span>=<span style="color: rgba(0, 0, 0, 1)"> {}
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 提交时验证一下表格里的数据</span>
const newData =<span style="color: rgba(0, 0, 0, 1)"> []
let flag </span>= <span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">
sourceData.some((item: any) </span>=><span style="color: rgba(0, 0, 0, 1)"> {
const obj </span>=<span style="color: rgba(0, 0, 0, 1)"> { ...item }
</span><span style="color: rgba(0, 0, 255, 1)">if</span> (!<span style="color: rgba(0, 0, 0, 1)">item.value) {
obj.errorFiled </span>= <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">
flag </span>= <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">
}
newData.push(obj)
})
</span><span style="color: rgba(0, 0, 255, 1)">if</span><span style="color: rgba(0, 0, 0, 1)"> (flag) {
setSourceData(newData)
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)">
}
fieldsValue.businessFields </span>=<span style="color: rgba(0, 0, 0, 1)"> sourceData
console.log(</span>234<span style="color: rgba(0, 0, 0, 1)">, sourceData)
handleUpdate(fieldsValue) </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 传值给父组件</span>
<span style="color: rgba(0, 0, 0, 1)">}
const renderFooter </span>= () =><span style="color: rgba(0, 0, 0, 1)"> {
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> (
</span><>
<Button onClick={() => handleUpdateModalVisible()}>取消</Button>
<Button onClick={handleSubmit}>确定</Button>
</>
<span style="color: rgba(0, 0, 0, 1)"> )
}
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> (
</span><<span style="color: rgba(0, 0, 0, 1)">Modal
width</span>={840<span style="color: rgba(0, 0, 0, 1)">}
bodyStyle</span>={{ padding: '32px 40px 48px'<span style="color: rgba(0, 0, 0, 1)"> }}
destroyOnClose
title</span>='添加增信品种'<span style="color: rgba(0, 0, 0, 1)">
visible</span>=<span style="color: rgba(0, 0, 0, 1)">{updateModalVisible}
footer</span>=<span style="color: rgba(0, 0, 0, 1)">{renderFooter()}
maskClosable</span>={<span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">}
onCancel</span>={() =><span style="color: rgba(0, 0, 0, 1)"> handleUpdateModalVisible()}
</span>>
<>
<<span style="color: rgba(0, 0, 0, 1)">Table
bordered
dataSource</span>=<span style="color: rgba(0, 0, 0, 1)">{sourceData}
columns</span>=<span style="color: rgba(0, 0, 0, 1)">{columns}
pagination</span>={<span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">}
rowKey</span>='fieldCode'<span style="color: rgba(0, 0, 0, 1)">
style</span>={{ maxHeight: '350px', overflow: 'auto'<span style="color: rgba(0, 0, 0, 1)"> }}
</span>/>
</>
</Modal>
<span style="color: rgba(0, 0, 0, 1)">)
}
export </span><span style="color: rgba(0, 0, 255, 1)">default</span> UpdateForm</pre>
</div>
<p> </p>
<div>
<div>父组件调用</div>
<div>father.tsx</div>
<div> </div>
<div>
<div class="cnblogs_code">
<pre>import CreateForm from './components/CreateForm'<span style="color: rgba(0, 0, 0, 1)">
const TableList: React.FC</span><{}> = () =><span style="color: rgba(0, 0, 0, 1)"> {
const </span>= useState<<span style="color: rgba(0, 0, 255, 1)">boolean</span>>(<span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">)
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> (
</span><div>
<Button type='primary' onClick={() =><span style="color: rgba(0, 0, 0, 1)"> {
handleModalVisible(</span><span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">)
}}</span>><span style="color: rgba(0, 0, 0, 1)">
新建
</span></Button>
<<span style="color: rgba(0, 0, 0, 1)">CreateForm
onCancel</span>={() => handleModalVisible(<span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">)}
onConfirm</span>={(value) =><span style="color: rgba(0, 0, 0, 1)"> {
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 提交事件</span>
<span style="color: rgba(0, 0, 0, 1)"> }}
modalVisible</span>=<span style="color: rgba(0, 0, 0, 1)">{createModalVisible}
</span>/>
</div>
<span style="color: rgba(0, 0, 0, 1)">)
}</span></pre>
</div>
<p> </p>
<div><br>
<div>样式文件</div>
<div>style.less</div>
<br>
<div>.tableinput {</div>
<div> padding-left: 6px;</div>
<div>}</div>
<div>.errorinput {</div>
<div> border: 1px solid #ff4d4f;</div>
<div>}</div>
<div>.tabletip {</div>
<div> color: #ff4d4f;</div>
<div>}</div>
</div>
</div>
</div>
</div>
</div>
</div><br><br>
来源：https://www.cnblogs.com/steamed-twisted-roll/p/13038462.html
頁:
[1]