useModal（简单）

介绍

因为一个项目中会有很多弹框&＃xff0c;然后如果是同类型的弹框的话每次都要重新写一遍Modal。这样的话也不能说有事&＃xff0c;就是会写很多重复代码并且在后期维护会感觉很难受&＃xff0c;所以基于hooks我们也可以简单的做一个useModal。

这里的话我是做了一个基于表单的useFormModal。

封装

hooks/useFormModal

import React, { useState } from &＃39;react&＃39;;
import { Modal } from &＃39;antd&＃39;;interface modalState {initTitle: string,initContent: any,
}interface ModalProps {onOk: any,onCancel: any
}const useModal &＃61; ({ initTitle, initContent }: modalState) &＃61;> {const [visible, setVisible] &＃61; useState(false);const content &＃61; initContent;const [title, setTitle] &＃61; useState(initTitle);const CustomModal &＃61; (props: ModalProps) &＃61;> {const onOk &＃61; () &＃61;> {const { onOk } &＃61; props;const form &＃61; content.props.form;onOk(form)}const onCancel &＃61; () &＃61;> {const { onCancel } &＃61; props;onCancel()}return (<Modalvisible&＃61;{visible}title&＃61;{title}okText&＃61;&＃39;确定&＃39;onOk&＃61;{onOk}cancelText&＃61;&＃39;取消&＃39;onCancel&＃61;{onCancel}maskClosable&＃61;{false}>{content}</Modal>)}const show &＃61; () &＃61;> {setVisible(true)}const hide &＃61; () &＃61;> {setVisible(false)}return { show, hide, CustomModal, setTitle }
}
export default useModal;


这里因为我是基于form封装的&＃xff0c;所以最后我还是暴露form出去到最上面那层了

网上看到的例子是这样定义content的&＃xff0c;但是我在后续使用中如果使用setContent的话会报错&＃xff0c;所以我就改成了上面那种写法&＃xff0c;不够感觉也足够了。如果有哪位大哥知道怎么用还请告知&＃xff01;

const [content,setContent] &＃61; useState(initContent);return { show, hide, CustomModal,setContent, setTitle }


还有一个问题&＃xff0c;就是隐藏动画没了&＃xff0c;我后面看了一下发现是dom节点隐藏的时候是被销毁了&＃xff0c;而直接使用Modal的话是会保留在dom节点中&＃xff0c;所以会有隐藏动画&＃xff0c;不知道什么原因。

我的猜想就是使用hooks的话状态在另外一层&＃xff0c;不在当前组件&＃xff0c;所以他不会在当前页面保存&＃xff0c;那这样就很有问题呀&＃xff01;还是说倒回去用高阶组件包一层&＃xff1f;

使用

addModal.tsx

import React from &＃39;react&＃39;;
import { Form, Input, Button } from &＃39;antd&＃39;;const layout &＃61; {labelCol: { span: 24 },wrapperCol: { span: 24 }
}const tailLayout &＃61; {wrapperCol: { offset: 8, span: 16 }
}export interface modalState {currentItem: any
}const AddModal &＃61; (props: any) &＃61;> {// console.log(&＃39;AddModal&＃39;, props)const { currentItem } &＃61; props;const [form] &＃61; Form.useForm()return (<Form{...layout}form&＃61;{form}><Form.Itemlabel&＃61;&＃39;Username&＃39;name&＃61;&＃39;username&＃39;initialValue&＃61;{currentItem.username}rules&＃61;{[{ required: true, whitespace: true, message: &＃39;请填写用户名&＃39; }]}><Input autoComplete&＃61;&＃39;off&＃39; /></Form.Item><Form.Itemlabel&＃61;&＃39;Password&＃39;name&＃61;&＃39;password&＃39;initialValue&＃61;{currentItem.password}rules&＃61;{[{ required: true, message: &＃39;请填写密码&＃39; }]}><Input.Password /></Form.Item><Form.Item {...tailLayout}><Button type&＃61;&＃39;primary&＃39; htmlType&＃61;&＃39;submit&＃39;>登录</Button></Form.Item></Form>)
}
export default AddModal;


这里的话主要就是接受数据渲染了&＃xff0c;其他的最后扫尾就不用他来干了&＃xff0c;这个组件就可以好好的专注于表单活动了。

index.tsx

import React from &＃39;react&＃39;;
import { Result, Button } from &＃39;antd&＃39;;
import moment from &＃39;moment&＃39;import useFormModal from &＃39;&＃64;/hooks/useFormModal&＃39;;
import AddModal from &＃39;./AddModal&＃39;;import { modalState } from &＃39;./TestModal&＃39;;const userName &＃61; window.localStorage.getItem(&＃39;user&＃39;);const currentItem &＃61; {username: &＃39;1&＃39;,password: &＃39;123456&＃39;
}const ModalProps: modalState &＃61; {currentItem,
}const Home &＃61; () &＃61;> {/** * 添加弹框*/const {show: addShow,hide: addHide,CustomModal: AddCustomModal} &＃61; useFormModal({ initTitle: &＃39;添加&＃39;, initContent: AddModal(ModalProps) })// useModal/*** 添加*/const AddCustomModalProps &＃61; {onOk: function () {console.log([...arguments][0]);const form &＃61; [...arguments][0];let values &＃61; form.getFieldValue();console.log(values);addHide()},onCancel: function () {addHide()}}return (<div><Resultstatus&＃61;"success"title&＃61;{&＃96;Hello ${userName}!&＃96;}subTitle&＃61;{&＃96;当前事件为&＃xff1a; ${moment(new Date).format(&＃39;YYYY.MM.DD HH:mm&＃39;)}&＃96;}extra&＃61;{[<Button type&＃61;"primary" key&＃61;"1" onClick&＃61;{addShow}>弹框1</ Button>]}/><AddCustomModal {...AddCustomModalProps} ></AddCustomModal></div>)
}
export default Home;


这样通过props来回归最后的提交动作&＃xff0c;这样的话就专注于每个组件处理自己的事情。

效果

写在后面

不推荐上面这种封装写法&＃xff0c;原因就是后面的节点不会留在dom中&＃xff0c;所以一些动效就没了。然后也不够标准化&＃xff0c;所以还是建议Modal单独写&＃xff0c;不过他的title,type,visible可以单独拎出来做管理。类似这种

import { useState, useMemo } from &＃39;react&＃39;;declare type ModalType &＃61; &＃39;add&＃39; | &＃39;update&＃39;;export interface useModalConfig {defaultVisible?: boolean;defaultType?: ModalType;
}export default function useModal(config: useModalConfig &＃61; {}) {const { defaultType &＃61; &＃39;add&＃39;, defaultVisible &＃61; false } &＃61; config;const [type, setType] &＃61; useState<ModalType>(defaultType);const [visible, setVisible] &＃61; useState<boolean>(defaultVisible);function toggle() {setVisible(!visible);}function setTypeWithVisible(val: ModalType) {setType(val);setVisible(true);}return useMemo(() &＃61;> {return {type,setType,visible,setVisible,toggle,setTypeWithVisible,};}, [type, visible]);
}