一个数据列表少不了数据的增、删、改，一般我们都是通过Modal+Form实现表单数据的获取，在一个复杂的数据列表中我们需要好多个Modal+Form的配合，这时候我们需要维护好多个Modal的visible状态，例如下面的场景:
const List = () => {
const [visible1, setVisible1] = useState(false);
const [visible2, setVisible2] = useState(false);
const [visible3, setVisible3] = useState(false);
const [visible4, setVisible4] = useState(false);
const [visible5, setVisible5] = useState(false);
const [visible6, setVisible6] = useState(false);
return(
<div>
<Modal visible={visible1}><Form1/></Modal>
<Modal visible={visible2}><Form2/></Modal>
<Modal visible={visible3}><Form3/></Modal>
<Modal visible={visible4}><Form4/></Modal>
<Modal visible={visible5}><Form5/></Modal>
<Modal visible={visible6}><Form6/></Modal>
<div/>
)
}
姑且不算其他代码就Modal和state我们就写了将近20行代码，那如何减少Modal和state的维护呢？
封装useModal实现Modal优雅的使用：
首先，我们看一下预期最简单的使用方式，我们只需要调用modal.open方法时，替换children就可达到Modal重复使用。
export default () => {
const [modal, ModalDOM] = useModal();
const handleClick = () => {
modal.open({
title: '收集数据',
children: <Form1/>,
onOk: (values: any) => { // values为收集到的表单d
modal.close();
}
});
}
return (
<>
<button onClick={handleClick}>自定义useModal</button>
{ModalDOM}
</>
)
}
上面我们写的预期效果，我们知道useModal返回了一个钩子和一个Modal组件，通过调用钩子的open方法和close方法来控制Modal组件打开和关闭，下面我们通过预期，逆向实现主体函数：
interface modalRefType {
open: () => void;
close: () => void;
injectChildren: (child: React.ReactElement) => void;
injectModalProps: (props: ModalProps) => void;
}
export default () => {
const modalRef = useRef<modalRefType>();
const handle = useMemo(() => {
return {
open: ({ children, ...rest }) => {
modalRef.current.injectChildren(children); // 注入子组件
modalRef.current.injectModalProps(rest); // 注入Modal的参数
modalRef.current.open();
},
close: () => {
modalRef.current.close();
}
};
}, []);
return [handle, <MyModal ref={modalRef} />] as const;
}
主体函数思路还是比较清晰，通过handle+useRef控制MyModal组件暴露出来的injectChildren、injectModalProps、open、close方法，下面我们再根据暴露出来的这些方法，逆向编程实现MyModal组件:
const MyModal = memo(forwardRef((prop: any, ref) => {
const [form] = Form.useForm();
const [modalChildren, setModalChildren] = useState<React.ReactElement>(null);
const [modalProps, setModalProps] = useState<ModalProps>({
visible: false,
});
// ant.design 4.0 Form的onFinish触发回调
const onFinish = useCallback((values: any) => {
modalProps.onOk?.(values);
}, [form, modalProps]);
// 关闭当前Modal
const onClose = useCallback(() => {
setModalProps((source) => ({
...source,
visible: false,
}));
}, [form]);
// 关闭当前Modal
const onOpen = useCallback(() => {
setModalProps((source) => ({
...source,
visible: true,
}));
}, [form]);
useImperativeHandle(ref, () => ({
// 注入Modal的子组件
injectChildren: (element) => {
setModalChildren(element);
},
// 注入Modal参数
injectModalProps: (props) => {
console.log(props)
setModalProps((source) => {
return {
...source,
...props,
}
});
},
// 打开Modal
open: () => {
onOpen();
},
// 关闭Modal
close: () => {
onClose();
}
}), []);
// 这里的Modal是ant.design中的Modal
return (
<Modal
{...modalProps}
onCancel={onClose}
onOk={() => form.submit()}.
>
{
modalChildren
?
React.cloneElement(modalChildren, {
onFinish,
form,
onClose,
})
: null
}
</Modal>
)
}));
我们通过React.cloneElement克隆了子组件(就是我们的业务代码Form)，并且注入form和onFinish实现对表单的控制，通过onOk方法的挟持，实现在点击Modal的ok按钮时获取表单数据。
以上代码有一个细节，我们在改变状态的时候都是使用函数的方式setModalProps((sourcce) => ({...source, ...}))，这主要是为了获取最新的状态进行。
到目前为止，我们已经实现了useModal基础版本，它只能让我们创建表单，而无法编辑表单和脱离表单去使用。
进阶实现useModal
为了脱离Form使用和表单的编辑，我们添加了type、initialValues参数：
....
// 修改使用方式
const handleClick = () => {
modal.open({
title: '收集数据',
type: 'form', // 类型为form时需要Form触发onFinish才触发onOk
initialValues: { name: '原值' }, // 表单默认值
children: <Form1/>,
onOk: (values: any) => {
console.log('收集到的表单', values);
modal.close();
}
});
}
....
升级后useModal完整的代码:
import React, { useRef, useMemo, memo, forwardRef, useCallback, useState, useImperativeHandle } from 'react';
import { Modal, Form } from 'antd';
import type { ModalProps } from 'antd';
import "antd/dist/antd.css";
const MyModal = memo(forwardRef((prop: any, ref) => {
const [form] = Form.useForm();
const [modalChildren, setModalChildren] = useState<React.ReactElement>(null);
const [modalProps, setModalProps] = useState<ModalProps>({
visible: false,
});
const typeRef = useRef<string>();
// ant.design 4.0 Form的onFinish触发回调
const onFinish = useCallback((values: any) => {
modalProps.onOk?.(values);
}, [form, modalProps]);
// 关闭当前Modal
const onClose = useCallback(() => {
setModalProps((source) => ({
...source,
visible: false,
}));
}, [form]);
// 关闭当前Modal
const onOpen = useCallback(() => {
setModalProps((source) => ({
...source,
visible: true,
}));
}, [form]);
useImperativeHandle(ref, () => ({
// 注入Modal的子组件
injectChildren: (element) => {
setModalChildren(element);
},
// 注入Modal参数
injectModalProps: (props) => {
console.log(props)
setModalProps((source) => {
return {
...source,
...props,
}
});
},
// 打开Modal
open: () => {
onOpen();
},
// 关闭Modal
close: () => {
onClose();
},
// 设置表单数据
setFieldsValue: (values: any) => {
form.setFieldsValue?.(values);
},
setType: (type: string) => {
typeRef.current = type;
}
}), []);
const handleOk = useCallback(() => {
if (typeRef.current === 'form') {
form.submit();
} else {
modalProps.onOk?.(null);
}
}, [form, modalProps]);
// 这里的Modal是ant.design中的Modal
return (
<Modal
{...modalProps}
onCancel={onClose}
onOk={handleOk}
>
{
modalChildren
?
React.cloneElement(modalChildren, {
onFinish,
form,
onClose,
})
: null
}
</Modal>
)
}));
interface modalRefType {
open: () => void;
close: () => void;
injectChildren: (child: React.ReactElement) => void;
injectModalProps: (props: ModalProps) => void;
setFieldsValue: (values: any) => void;
setType: (type: string) => void;
}
interface openArgType extends ModalProps {
children?: React.ReactElement,
type?: 'form' | 'default',
initialValues?: {
[key: string]: any;
},
}
export default () => {
const modalRef = useRef<modalRefType>();
const handle = useMemo(() => {
return {
open: ({ children, type, initialValues, ...rest }: openArgType) => {
modalRef.current.setType(type);
modalRef.current.injectChildren(children); // 注入子组件
modalRef.current.injectModalProps(rest); // 注入Modal的参数
modalRef.current.open();
if (initialValues && type === 'form') {
modalRef.current.setFieldsValue?.(initialValues);
}
},
close: () => {
modalRef.current.close();
}
};
}, []);
return [handle, <MyModal ref={modalRef} />] as const;
}
完结：以上我们通过了逆向的编程方式，实现了我们需求的useModal钩子，用这样的一个hook使用Modal是不是优雅多了。
网友评论