表单验证系列（四）：表单校验react-final-form-hooks之子模块（卡片4 （table表单验证 TableComponent ColumnsFormHooks））

Table均为输入框，输入内容时同步校验

import React, {
  forwardRef,
  useImperativeHandle,
  useState,
  useRef,
  useEffect,
} from 'react';
import { Table, Button } from 'tea-component';
import ColumnsForm from '../ColumnsFormFormik';
import ColumnsFormHooks from '../ColumnsFormHooks';
interface propsTypes {
  tableData: any;
}
let num = 0;
export default forwardRef(function TableComponent(props: propsTypes, ref: any) {
  // 卡片4
  const columnsFormRef: any = useRef([]);
  const { tableData } = props;
  const [cvmList, setCvmList] = useState<any>(
    tableData?.map((i) => {
      num += 1;
      i = { ...i, onlySingle: num + 'ref' };
      return i;
    }),
  );
  useImperativeHandle(ref, () => ({
    getFields() {
      // debugger
      let arr = cvmList?.map((i: any) => {
        let objKey = columnsFormRef?.current[i?.onlySingle + '-key']?.doSave();
        let objvalue =
          columnsFormRef?.current[i?.onlySingle + '-value']?.doSave();
        i = { ...i, ...objKey, ...objvalue };
        return i;
      });
      setCvmList(arr);
      return arr;
    },
    // 获取表单组件是否通过校验记录
    checkResult() {
      let arr: boolean[] = [];
      cvmList?.map((i: any) => {
        let objKeyCheck =
          columnsFormRef?.current[i?.onlySingle + '-key']?.checkResult();
        let objvalueCheck =
          columnsFormRef?.current[i?.onlySingle + '-value']?.checkResult();
        arr.push(objKeyCheck, objvalueCheck);
      });
      return arr;
    },
  }));

  // 添加
  const addTableData = () => {
    let arr = cvmList;
    num += 1;
    arr.push({ onlySingle: num + 'ref' });
    setCvmList([...arr]);
  };
  // 删除
  const delTableData = (index: string) => {
    let arr = cvmList;
    arr?.map((i: any, iInd: number) => {
      if (i?.onlySingle === index) {
        arr.splice(iInd, 1);
      }
    });
    setCvmList([...arr]);
  };

  const [columns, setClums] = useState<any>([
    {
      key: 'key',
      header: 'Key',
      render: (cvm: any) => (
        <ColumnsFormHooks
          columnsForm={{ key: cvm?.key }}
          inputName={'key'}
          ref={(i) => {
            columnsFormRef.current[cvm.onlySingle + '-key'] = i;
          }}
        />
      ),
    },
    {
      key: 'value',
      header: 'Value',
      render: (cvm: any, index: string) => (
        <>
          <ColumnsFormHooks
            columnsForm={{ value: cvm?.value }}
            inputName={'value'}
            ref={(i) => {
              columnsFormRef.current[cvm.onlySingle + '-value'] = i;
            }}
          />
          <span style={{ marginLeft: 20 }}></span>
          {cvmList?.length === 1 ? null : (
            <Button type="link" onClick={() => delTableData(index)}>
              删除
            </Button>
          )}
          <Button
            type="link"
            className="tableComponent-addBtn-show"
            onClick={() => addTableData()}
          >
            添加
          </Button>
        </>
      ),
    },
  ]);

  return (
    <Table
      bordered
      verticalTop
      records={cvmList}
      columns={columns}
      recordKey="onlySingle"
    />
  );
});