表单验证系列（三）：react-final-form-hooks之子模块（卡片2 （表单验证 ReactFinalFormHooksCopy））

表单单个状态管理form.resetFieldState

import React, { useImperativeHandle, forwardRef, useState } from 'react';
import {
  Form,
  Input,
  notification,
  Select,
} from 'tea-component';
import {
  rules,
  Esc_Char,
  Cn_En_Num_Pun_100,
  Cn_En_Num_Pun_1000,
} from '@/utils/checkRoules';
import { useForm, useField } from 'react-final-form-hooks';
import getStatus from '@/utils/checkInput';

const selectOptions = [
  { value: '1', text: 1 },
  { value: '2', text: 2 },
  { value: '3', text: 3 },
];
interface propsType {
  data?: any,
}
export default forwardRef(function ReactFinalFormHooksCopy(
  props: propsType,
  ref: any,
) {
  const { data } = props;
  useImperativeHandle(ref, () => ({
    getFields() {
      form?.submit();
      const formStatus = form?.getState();
      resetFieldState(formStatus?.values?.favorite);
      if (JSON.stringify(formStatus?.errors) === '{}' && formStatus?.submitSucceeded) {
        return formStatus?.values;
      } else {
        setTimeout(() => {
          notification.error({ description: '卡片2请输入符合要求数据' });
        }, 1000);
      }
    },
  }));

  const [initialValues, setInitialValues] = useState({
    name: data?.name || '',
    favorite:data?.favorite ||  '',
    Select1: data?.Select1 || '',
    SelectElse: data?.SelectElse || '',
  })

  const onSubmit = (values) => {
    console.log('提交Submit 卡片2=============>copy', values);
  };
  const validateOne = ({ name, favorite, Select1, SelectElse }) => {
    // debugger
    let baseValidate = {
      name:
        name &&
        // name?.trim() &&
        Cn_En_Num_Pun_100.test(name) &&
        !Esc_Char.test(name)
          ? undefined
          : '100个字符以内，支持汉字、英文、标点符号、数字，不含转义符',
      favorite: !favorite ? '请选择Select' : undefined,
    }
    let favoriteOne = { Select1: !Select1 ? '请输入Select1' : undefined };
    let favoriteTwo = { SelectElse: !SelectElse ? '请输入SelectElse' : undefined };
    if (favorite === '1'|| !favorite) {
      return ({...baseValidate, ...favoriteOne});
    } else {
      return ({...baseValidate, ...favoriteTwo});
    }
  }

  const { form, handleSubmit, validating, submitting } = useForm({
    onSubmit,
    initialValuesEqual: () => true,
    initialValues,
    validate: ({name, favorite, Select1, SelectElse}) => {
      return (
        validateOne({ name, favorite, Select1, SelectElse })
      )
    },
  });

  const name = useField('name', form);
  const favorite = useField('favorite', form);
  const Select1 = useField('Select1', form);
  const SelectElse = useField('SelectElse', form);

  // 切换Select父级渲染不同input  初始化隐藏的表单值
  const resetFieldState = (values: any) => (
    values === '1' || !values
      ? (
        form.resetFieldState('SelectElse'),
        form?.initialize({...form.getState().values, SelectElse: ''})
      )
      : (
        form.resetFieldState('Select1'),
        form?.initialize({...form.getState().values, Select1: ''})
      )
  )

  return (
    <form onSubmit={handleSubmit}>
      {/* 表单验证 */}
      <Form>
        <Form.Item
          label="表单验证名称"
          status={getStatus(name.meta, validating)}
          message={
            getStatus(name.meta, validating) === 'error' && name.meta.error
          }
        >
          <Input
            {...name.input}
            size="l"
            autoComplete="off"
            placeholder="请输入表单验证名称"
          />
        </Form.Item>
        <Form.Item
          label="Select父级"
          status={getStatus(favorite.meta, validating)}
          message={
            getStatus(favorite.meta, validating) === 'error' && favorite.meta.error
          }
        >
          <Select
            {...favorite?.input}
            appearance="button"
            options={selectOptions}
            size="l"
            boxSizeSync
            placeholder="请选择Select"
            onChange={(value) => {
              favorite?.input?.onChange(value);
              resetFieldState(value);
            }}
          />
        </Form.Item>
        {favorite?.input?.value === '1' || !favorite?.input?.value ? (
          <Form.Item
            label="Select1"
            status={getStatus(Select1.meta, validating)}
            message={
              getStatus(Select1.meta, validating) === 'error' && Select1.meta.error
            }
          >
          <Input
            {...Select1.input}
            size="l"
            autoComplete="off"
            placeholder="请输入Select1"
          />
          </Form.Item>
        ) : (
          <Form.Item
            label="SelectElse"
            status={getStatus(SelectElse.meta, validating)}
            message={
              getStatus(SelectElse.meta, validating) === 'error' && SelectElse.meta.error
            }
          >
          <Input
            {...SelectElse.input}
            size="l"
            autoComplete="off"
            placeholder="请输入SelectElse"
          />
          </Form.Item>
        )}
      </Form>
    </form>
  );
});