表单验证系列（二）：react-final-form-hooks-父级结构

一、页面主体样式

二、页面代码
对页面每一张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>
  );
}