antd modal实例方法的获取

最新推荐文章于 2024-08-16 10:20:20 发布

在座的各位都是菜杯

最新推荐文章于 2024-08-16 10:20:20 发布

阅读量893

点赞数

CC 4.0 BY-SA版权

分类专栏： react 文章标签： javascript vue.js 前端

本文链接：https://blog.youkuaiyun.com/coderYYA/article/details/123077794

react 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何使用React和Ant Design库创建一个可重用的登录弹窗组件，展示了如何在父组件中触发并管理子Modal组件的显示与关闭。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父组件


import React, { useRef } from 'react'
import YaForm from './Form'
import YaModal from '@/component/Modal'
import { Button } from 'antd'
const YaLogin = () => {
	const modalRef = useRef()
	const handleShowModal = () => {
		modalRef.current.showModal()
	}
	const handleCloseModal = () => {
		modalRef.current.closeModal()
	}
	return (
		<div>
			<Button type="primary" onClick={handleShowModal}>
				点击登录弹窗
			</Button>
			<YaModal
				ref={modalRef}
				title="登录窗口"
				children={<YaForm handleCloseModal={handleCloseModal} />}
			/>
		</div>
	)
}

export default YaLogin

modal组件


import React, { useState, forwardRef, useImperativeHandle } from 'react'
import { Button, Modal } from 'antd'
const YaModal = (props, ref) => {
	const [isModalVisible, setIsModalVisible] = useState(false)
	useImperativeHandle(ref, () => {
		return {
			showModal,
			closeModal,
		}
	})
	const showModal = () => {
		setIsModalVisible(true)
	}
	const closeModal = () => {
		setIsModalVisible(false)
	}
	const handleOk = () => {
		setIsModalVisible(false)
	}

	const handleCancel = () => {
		setIsModalVisible(false)
	}
	return (
		<div>
			<Modal
				title={props.title ? props.title : '弹出窗'}
				visible={isModalVisible}
				footer={props.footer ? true : false}
				onOk={handleOk}
				onCancel={handleCancel}
			>
				{props.children}
			</Modal>
		</div>
	)
}

export default forwardRef(YaModal)