一、页面主体样式
二、页面代码
对页面每一张Card进行组件拆分,保证结构清晰及复用性
import React, { useRef, useState } from 'react';
import { useHistory } from 'react-router-dom';
import {
Layout,
Card,
Button,
} from 'tea-component';
import ReactFinalFormHooks from '../components/ReactFinalFormHooks';
import ReactFinalFormHooksCopy from '../components/ReactFinalFormHooksCopy';
import FieldArrayComponent from '../components/FieldArrayComponent';
import TableComponent from '../components/TableComponent';
const { Content } = Layout;
const data = {
cardOne: {
name: '卡片1表单验证名称',
sex: 'male',
age: 20,
hobbies: ['code'],
},
cardTwo: {
name: '卡片2表单验证名称',
favorite: '2',
SelectElse: 'SelectElse'
},
cardFour: [{key: '1', value: '1'}]
}
export default function TestValidation() {
const history = useHistory();
// table data
const [tableComponentData, setTableComponentData] = useState<any>([{
key: '', value: ''
}]);
// 卡片1
const CardDemoOne: any = useRef();
// 卡片2
const CardDemoTwo: any = useRef();
// 卡片3
const CardDemoThree: any = useRef();
// 卡片4
const CardDemoFour: any = useRef();
const doSave = () => {
const CardDemoOneData = CardDemoOne?.current?.getFields();
const CardDemoTwoData = CardDemoTwo?.current?.getFields();
const CardDemoThreeData = CardDemoThree?.current?.getFields();
// 卡片4 table数据
const CardDemoFourData = CardDemoFour?.current?.getFields();
// 卡片4 校验结果 数组
const CardDemoFourCheckData = CardDemoFour?.current?.checkResult();
console.log('卡4===》', CardDemoFourData, "CardDemoFourCheckData", CardDemoFourCheckData);
}
return (
<Content className="oit-layout--fixheader">
<Content.Header
showBackButton
title="编辑表单校验"
onBackButtonClick={history.goBack}
></Content.Header>
<Content.Body full className="activitiesLists testValidation-cardBody">
{/* 卡片1 */}
<Card>
<Card.Body title='卡片1 (表单验证 ReactFinalFormHooks)'>
<ReactFinalFormHooks
ref={CardDemoOne}
data={data?.cardOne}
/>
</Card.Body>
</Card>
{/* 卡片2 */}
<Card>
<Card.Body title='卡片2 (表单验证 ReactFinalFormHooksCopy)'>
<ReactFinalFormHooksCopy
ref={CardDemoTwo}
data={data?.cardTwo}
/>
</Card.Body>
</Card>
{/* 卡片4 */}
<Card>
<Card.Body title='卡片4 (table表单验证 TableComponent ColumnsFormHooks)'>
<TableComponent
ref={CardDemoFour}
tableData={data?.cardFour}
/>
</Card.Body>
</Card>
</Content.Body>
<Content.Footer>
<Card>
<Card.Body>
<Button
htmlType="button"
type="primary"
onClick={() => {
doSave()
}}
>
确定
</Button>
<Button style={{ marginLeft: 20 }}>取消</Button>
</Card.Body>
</Card>
</Content.Footer>
</Content>
);
}