rc-form中getFieldDecorator()和getFieldError()如何获取form的值以及校验提示

通过rc-form创建表单，如何使用getFieldDecorator()和getFieldError()获取表单对应的值以及提示的校验信息显示问题

1、引入rc-form中的元素

import React, { useRef } from "react";
import { createForm, formShape } from 'rc-form';
import { Select, Form } from "antd";
import { Dispatch } from "dva";
import styles from './index.less';

 2、getFieldDecorator()和getFieldError()获取表单对应的值以及提示的校验信息显示问题

<Form.Item label="邮箱">
    <span>                                         
        {getFieldDecorator('email', {
            initialValue: '',
            rules: [{ required: true, message: '邮箱必填!' }],})(<Input />)}
    </span>
    <div className={styles.styleError}>
        {(getFieldError('email') || []).join(', ')}
    </div>
</Form.Item>

3、styleError类样式

.styleError{
    color: red;
    font-weight: 600;
    font-size: 13px;
  }

注意：

1、rc-form中getFieldDecorator()和getFieldError()必须同时使用，才会出现提示显示，提示信息样式需要自己自定义。

2、Form.Item中默认规则rules和自定义规则getFieldDecorator()不要一起使用，一般用一个即可。