Ant-Design modal对话框未打开时，无法通过uesRef获取modal内部元素DOM节点

最新推荐文章于 2023-08-26 21:32:11 发布
最新推荐文章于 2023-08-26 21:32:11 发布
阅读量1.4k 收藏
点赞数 1
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yabokusama/article/details/123880749
版权

使用antd的modal对话框，想要通过uesRef获取modal内部dom节点时，需要注意：在未展开过modal前，无法获取其内部dom节点，即使在组件已挂载时也一样。

首先，使用modal对话框，并在其内部放置一个input框，通过ref和useRef获取其dom节点，如图：

 

 

页面效果：

 

 接下来，在组件挂载时打印DOM节点：

 

最低0.47元/天 解锁文章
Yabokusama
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Modal.xx语法糖
Thelittlewhale的博客
08-15 2169
详见antd官方文档（好叭，也没多详细= =） 个人常用有Modal.info和Modal.confirm Modal.info默认按钮有1个，为【知道了】,点击留在当前页 Modal.confirm默认按钮有2个，为【取消】【确定】，点击取消留在当前页，点击确认执行确定按钮事件代码 需求：现在需要弹窗中只有一个按钮，点击后执行期望事件代码（不是停留在当前页）。 Modal.info({ title:'', content:'', }) Modal.confirm({ title:'modal
antd Modal中添加Form表单用ref获取数据，第一次打开取到的是null
weixin_46264539的博客
05-29 2594
Modal的 API中有一个强制渲染的属性 给Modal加上此属性即可。 forceRender={true} 第一次取就可以取到了，只是会把渲染的先隐藏起来，可能会浪费些渲染性能。
Vue3.0使用antd时，打开Modal框时无法获取里面的dom节点
CSND7997的博客
06-11 3070
问题：打开模态框之前，如果原本后台存有值需要，如何填写到编辑框里面？ 测试方法1：在打开模态框的方法里面，获取dom节点然后innerHTML，比如 showModalList() { data.fxModel = true; document.getElementById("info")?.insertAdjacentHTML("afterbegin", props.fxValue); }, 报错document.getElementById(“info”)找不
解决antd design的Modal组件弹出卡顿的问题
dearbaba_11的博客
08-07 2130
解决antd design的Modal组件弹出卡顿的问题
关于Ant Design中的Modal组件的各种回调方法在调用后台时报页面崩溃的错误。
6666
12-31 1346
关于Ant Design中的Modal组件的各种回调方法在调用后台时报页面崩溃的错误。
React优化：使用 ref 代替 state
Ranye的博客
06-21 289
每次更新state的时候会rerender，但更新ref则不会如果要一个变量，需要它随时更新，但是每次更新后不用重新渲染，可以使用useRef
ant-design-draggable-modal:Ant Design的Modal，可拖动
05-02
yarn add ant-design-draggable-modal 注意：您必须使用react@16.8.0和react-dom@16.8.0或更高版本。 :hammer: 用法 import React , { useState , useCallback } from 'react' import { Button } from 'antd' ...
Bootstrap Modal对话框如何在关闭时触发事件
09-01
在Bootstrap框架中，Modal组件提供了一系列的事件，允许开发者在特定的交互时刻执行自定义功能，比如在对话框打开、关闭或者在其他关键点触发JavaScript代码。本篇文章将详细介绍如何在Bootstrap Modal对话框关闭时...
基于原生JS封装的Modal对话框插件的示例代码
10-14
在`ModalPlugin`内部，我们将定义一个`init`函数，用于初始化和构建Modal对话框。以下是一个简单的示例： ```javascript function ModalPlugin(options) { return new init(options); } function init(options) {...
react-st-modal：用于React JS的简单灵活的模式对话框组件
02-04
产品特点简单易用的API 与移动设备兼容已实施的标准交互功能：警报，确认，提示异步/等待语法通过CSS变量自定义辅助功能和焦点控制动态调用模式对话框，不需要在代码中定义没有第三方图书馆演示和文档： ://nodlik....
react-native-modal：增强，动画和可自定义的react-native modal
01-29
react-native-modal的目标是通过添加动画和样式自定义选项来扩展原始的react-native Modal组件，同时仍提供一个简单的API。 产品特点 流畅的输入/退出动画 简单，灵活的简单API 可自定义的背景不透明度，颜色和...
React 使用 useRef() 获取循环中所有子组件实例
最新发布
赵花花的博客
08-26 1655
react 获取遍历中所有的子组件实例对象，及对子组件内部函数进行操作
react_hooks系列05_useRef，useImperativeHandle，高阶组件forwordRef
jiang7701037的博客
07-02 885
返回一个可变的 ref 对象，其(ref 对象).current属性被初始化为传入的参数（返回的 ref 对象在组件的整个生命周期内保持不变。
react-----dom对象和useref()
qq_52563729的博客
10-12 441
1
React-antd-Modal在js函数中调用时,进行操作校验和根据条件关闭modal
Afterwards_的专栏
09-20 1143
let md = Modal.info( { width:400, icon:null, content:content, closable:true, onOk:(e)=> { if (!newSnippet.type) .
使用antd confirm 定义弹框关闭事件
热门推荐
赵乘风_i
09-19 2万+
问题： 1、confirm 使用 在使用antd的confirm确认时，需要在点击事件发生后关闭弹框。但是confirm提供的关闭只有 确定 按钮。那么就需要自定义关闭弹窗。 点击  密码修改页  之后 会打开新的tab页，所以需要弹框在点击之后也关闭。 解决： confirm提供了一个弹窗的销毁方法 const info = Modal.info({}) info.destroy(...
ANTD 中Modal.info在app端使用点击关闭页面回到顶部的问题
weixin_40532650的博客
06-03 1776
遮罩层导致 mask:false,关闭遮罩层
antd modal实例方法的获取
coderYYA的博客
02-22 769
父组件 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.show
ant-design组件modal对话框两条横线去除
05-12
要去除Ant Design Modal对话框的两条横线，可以使用以下CSS代码： ``` .ant-modal-header { border-bottom: none; } ``` 这将在样式中将Ant Design Modal的头部边框设置为无，从而去除两条横线。将此CSS添加到您...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值