React18-完成弹窗封装

弹框封装

用法

js 复制代码
// 创建
userRef.current?.open('create')
// 修改
userRef.current?.open('edit',values)

{/* 创建用户 */}
<CreateUser mRef={userRef} update={} />

组件暴露open方法

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

js 复制代码
useImperativeHandle(ref, createHandle, dependencies?)
方法一:ref + forwardRef + useImperativeHandle
HTML 复制代码
// 父组件 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 (
    <Modal
      title="新增用户"
      width={800}
      open={visible}
      okText="确定"
      cancelText="取消"
      onOk={handleOk}
      onCancel={handleCancel}
    >...此处省略...</Modal>
})

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

方法二:自定义属性 + useImperativeHandle
HTML 复制代码
// 父组件 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 (
        <Modal
          title="新增用户"
          width={800}
          open={visible}
          okText="确定"
          cancelText="取消"
          onOk={handleOk}
          onCancel={handleCancel}
        >...此处省略...</Modal>
    )
}

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

类型定义

js 复制代码
import { MutableRefObject } from 'react'

// 操作类型
export type IAction = 'create' | 'edit' | 'delete'

// 弹框组件属性类型
export interface IModalProp {
  mRef: MutableRefObject<{ open: (type: IAction) => void } | undefined>
  update: () => void
}

开发弹窗功能

  1. 定义弹框表单
js 复制代码
export interface CreateParams {
  userName: string
  userEmail: string
  mobile?: number
  job?: string
  state?: number
  roleList?: string[]
  deptId?: string[]
  userImg: string
}
  1. 添加表单验证
js 复制代码
// 用户名称、userEmail和部门是必填
<Form.Item
  name="userEmail"
  label="邮箱"
  rules={[
    {
      required: true,
      message: '请输入邮箱'
    }
  ]}
>
  <Input placeholder="请输入邮箱:xxx@mars.com" />
</Form.Item>

// 提交时验证
const valid = await form.validateFields()
  1. 定义弹框
js 复制代码
<Modal
  title={action === 'create' ? '新增用户' : '编辑用户'}
  width={800}
  open={visible}
  okText="确定"
  cancelText="取消"
  onOk={handleOk}
  onCancel={handleCancel}
>
    ......
</Modal>

相关接口

  1. 部门列表

  2. 角色列表

等后面讲解完部门和角色以后,再过来把用户列表完善。

具体也需要结合AntD文档参考

相关推荐
GIS程序媛—椰子22 分钟前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
DogEgg_00128 分钟前
前端八股文(一)HTML 持续更新中。。。
前端·html
ZL不懂前端31 分钟前
Content Security Policy (CSP)
前端·javascript·面试
乐闻x34 分钟前
ESLint 使用教程(一):从零配置 ESLint
javascript·eslint
木舟100935 分钟前
ffmpeg重复回听音频流,时长叠加问题
前端
王大锤43911 小时前
golang通用后台管理系统07(后台与若依前端对接)
开发语言·前端·golang
我血条子呢1 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js
黎金安1 小时前
前端第二次作业
前端·css·css3
啦啦右一1 小时前
前端 | MYTED单篇TED词汇学习功能优化
前端·学习