antd(4.x)Modal结合form的复合使用

antd(4.x)Modal结合form的复合使用

效果展示：保留Modal的底部按钮

实现功能：

• 通过Modal自带的onOk和onCancel来受控Form表单的校验
• required时onOk校验必传输入框
• 创建时props传Modal-title并清空输入框
• 编辑时props传Modal-title并传入初始值

代码实现：

• modal+form（antd4modal+form只能以函数形式呈现）

export interface ITagModal {
    tagVis: boolean,
    tagTitle: string,
    cancelModal: ()=>void,
    addTag: ({tagName:string})=>void,
    currentTagValue:IcurrentTagValue
}

export interface IcurrentTagValue{
    tagName:string
}

export default function TagModal(props:ITagModal) {
    const { tagVis, tagTitle, cancelModal, addTag, currentTagValue } = props
    
    //第一步：我们推荐使用 Form.useForm 创建表单数据域进行控制。
    		注意：是 React Hooks 的实现，只能用于函数组件，如果使用类组件，通过ref创建
     		//类组件使用：【formRef = React.createRef<FormInstance>();】
  
    const [form] = Form.useForm();
		
  //第二步：对初始值进行处理
  	let initValues = {
        tagName: currentTagValue ? currentTagValue.tagName : '',
    }
    form.setFieldsValue(initValues)
  //第三步：UI渲染  
  return (
        <div>
            <Modal
                title={tagTitle}
                visible={tagVis}
                onCancel={cancelModal}
								//通过以下方法可实现对表单value的获取，取到的是一个Object	
                onOk={() => {
                    form
                        .validateFields()
                        .then(values => {      //检验成功时；
                            form.resetFields();
                            form.setFieldsValue(values)//例：{tagName:'888'}
                            addTag(values);
                        })
                        .catch(info => {      //检验失败时；
                            console.log('校验失败:', info);
                        });
                }}
            >
                <Form
                    form={form}//挂载form
                    name="userForm"
                    initialValues={initValues}  //初始值设置
                >
                    <Form.Item
                        label="标签名称"
                        name="tagName"
                        rules={[{ required: true, message: '请确保输入框不为空' }]}
                    >
                        <Input />
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    )
}