antd的form组件在form标签外触发验证

什么情况需要在form标签外触发验证呢？

有，比如新增页是个全屏弹框的自定义组件，这种组件，一般都带有 close icon ，确认，取消按钮。
那不管这种弹框的内容是什么，都是要通过确认btn去触发。

写法还是那个写法，就是换个位置调用

如果触发按钮在Form标签内部，就直接在Form标签上绑定onSubmit事件，指向handleSubmit 方法；

<Form onSubmit={handleSubmit}></Form>

如果触发按钮在Form标签外部，那哪个按钮操作，它就去调handleSubmit 方法。

比如这样：

import React from "react";
import { connect, DispatchProp } from "react-redux";
import { Form, Input, Button, message} from "antd";
import { FormComponentProps } from "antd/lib/form";

export interface Props extends DispatchProp {
    addUserRedux: any;
    form: FormComponentProps["form"];
}

const AddUser: React.FunctionComponent<Props> = props => {
	/** 自定义弹框式组件的确认btn ，触发提交 */
    const tapToAdd = () => {
        handleSubmit();
    };
    
    const formItemLayout = {
        labelCol: {
            xs: { span: 24 },
            sm: { span: 9 },
        },
        wrapperCol: {
            xs: { span: 24 },
            sm: { span: 7 },
        },
    };

    /** 提交表单 */
    const handleSubmit = () => {
        event.preventDefault();
        props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {
                console.info("验证通过: ", values);                
                // 调用接口 
                // 。。。               
            }
        });
    };

	return (
		<YourMaskPopup confirmBtn={tapToAdd}>
			<Form {...formItemLayout}>	{/*onSubmit={handleSubmit}*/}	
				<Form.Item label="用户姓名">
			        {getFieldDecorator("name", {
			            rules: [
			                {
			                    required: true,
			                    message: "请输入用户姓名",
			                },
			                {
			                    pattern: /^[A-Za-z0-9\u4e00-\u9fa5]{1,10}$/, // 只能输入字母数字汉字
			                    message: "最多输入10位汉字、数字或字母",
			                },
			            ],
			        })(<Input placeholder="请输入用户姓名" maxLength={10}/>)}
			    </Form.Item>		
				<Form.Item label="登录手机号">
					{getFieldDecorator("mobile", {
						rules: [
							{
								required: true,
								message: "请输入手机号",
							},
							{
								pattern: /^[1](([3][0-9])|([4][5-9])|([5][0-35-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/,
								message: "请填写正确的11位手机号",
							},
						],
					})(<Input placeholder="请输入手机号" maxLength={11} />)}
				</Form.Item>
				
				{/* <Form.Item>
			           <Button type="primary" htmlType="submit">
			               添加用户
			           </Button>
			       </Form.Item> */}
			</Form>			
		</YourMaskPopup>
	)
};

const AddUserWithForm = Form.create<Props>()(AddUser);  // create之后props里才有form这个对象

const mapStateToProps = (state: RootState) => {
    return {
        addUserRedux:state.app["your-manage/add-user"], // 存储的redux值，用页面所在路径命名，避免重名
    };
};

export default connect(mapStateToProps)(AddUserWithForm);