React18-完成弹窗封装

弹框封装

用法

// 创建
userRef.current?.open('create')
// 修改
userRef.current?.open('edit',values){/* 创建用户 */}
<CreateUser mRef={userRef} update={} />

组件暴露open方法

文档地址：https://react.dev/reference/react/useImperativeHandle

useImperativeHandle(ref, createHandle, dependencies?)

方法一：ref + forwardRef + useImperativeHandle

// 父组件 OrderList
import React, { useEffect, useRef, useState } from 'react'export default () => {const userRef = useRef()const handleOpen = () => {userRef.current?.open()}return <CreateUser ref={userRef} />
}// 子组件 CreateUser
const CreateUser = forwardRef((props: IProp, ref: any) => {// 组件内部完成显隐const [visible, setVisible] = useState(false)// 暴露 open 方法给父组件调用useImperativeHandle(ref, () => ({open: () => {setVisible(true)}}))return (<Modaltitle="新增用户"width={800}open={visible}okText="确定"cancelText="取消"onOk={handleOk}onCancel={handleCancel}>...此处省略...</Modal>
})

forwardRef官方解释：https://zh-hans.reactjs.org/docs/react-api.html#reactforwardref

方法二：自定义属性 + useImperativeHandle

// 父组件 OrderList
import React, { useEffect, useRef, useState } from 'react'export default () => {const userRef = useRef()const handleOpen = () => {userRef.current?.open()}return <CreateOrder userRef={userRef} />
}// 子组件 CreateOrder
interface IProp {userRef: MutableRefObject<{ open: () => void } | undefined>
}
const CreateUser = (props: IProp) => {const [visible, setVisible] = useState(false)useImperativeHandle(props.userRef, () => ({open: () => {setVisible(true)}}))return (<Modaltitle="新增用户"width={800}open={visible}okText="确定"cancelText="取消"onOk={handleOk}onCancel={handleCancel}>...此处省略...</Modal>)
}

这种方式注意， 组件上面的属性不可以定义ref，需要自定义其它属性。

类型定义

import { MutableRefObject } from 'react'// 操作类型
export type IAction = 'create' | 'edit' | 'delete'// 弹框组件属性类型
export interface IModalProp {mRef: MutableRefObject<{ open: (type: IAction) => void } | undefined>update: () => void
}

开发弹窗功能

1. 定义弹框表单

export interface CreateParams {userName: stringuserEmail: stringmobile?: numberjob?: stringstate?: numberroleList?: string[]deptId?: string[]userImg: string
}

2. 添加表单验证

// 用户名称、userEmail和部门是必填
<Form.Itemname="userEmail"label="邮箱"rules={[{required: true,message: '请输入邮箱'}]}
><Input placeholder="请输入邮箱:[e-mail]" />
</Form.Item>// 提交时验证
const valid = await form.validateFields()

3. 定义弹框

<Modaltitle={action === 'create' ? '新增用户' : '编辑用户'}width={800}open={visible}okText="确定"cancelText="取消"onOk={handleOk}onCancel={handleCancel}
>......
</Modal>

相关接口

1. 部门列表

2. 角色列表

等后面讲解完部门和角色以后，再过来把用户列表完善。
具体也需要结合AntD文档参考