antd Modal中添加Form表单用ref获取数据，第一次打开取到的是null

最新推荐文章于 2023-11-16 16:25:59 发布
最新推荐文章于 2023-11-16 16:25:59 发布
阅读量2.8k 收藏 1
点赞数 4
分类专栏： react antd 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_46264539/article/details/117390303
版权
本文探讨如何在预先创建并隐藏的modal中，通过设置forceRender属性实现实例渲染并在触发时显示。重点在于解决首次取值问题和性能影响，适合前端开发者参考。

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

modal动态创建 直接ref取值拿不到
1.modal提前创建 隐藏 点击调用的时候再显示
2.设置一个状态，让状态更新渲染form，再传入
给Modal加上此属性强制渲染即可。
forceRender={true}
第一次取就可以取到了，只是会把渲染的先隐藏起来，可能会浪费些渲染性能。
在这里插入图片描述

ant design弹出框获取表单数据
m0_60353695的博客
07-21 2374
1.Modal弹出框获取表单数据 const form = React.createRef(); const submit = () => { form.current.submit(); } const onReset = () => { form.current.resetFields(); }; <Modal visible={visible} onCancel={onCancel} footer={[<Button type="primary" onC
antd的联级选择器异步调用编辑回显_Antd v3 Form实现动态添加表单项及数据回显...
weixin_33286064的博客
02-22 1351
0、需求Form表单需要有新增和编辑表单项的功能，编辑即需要有表单有数据回显的功能。环境：react：16.13.1；Antd 3.x。一、创建表单1. createForm.create()这是一个高阶函数，传入的是react组件，返回一个新的react组件，在函数内部会对传入组件进行改造。经 Form.create() 包装过的组件会自带 this.props.form 属性。2. 表单数据绑...
使用React Antd框架时，出现Modal里加form表单，用ref回显数据，第一次取到的是null
你是我修复不了的bug，但我会用一生去维护
11-23 1989
使用React Antd框架时，出现Modal里加form表单，用ref回显数据，第一次取到的是null 在react项目里，使用ui框架ant-design。table列表的每一行都有编辑按钮，点击编辑，弹窗Modal出现，里面使用Form表单，然后用ref回显数据。但是发现第一次取的时候，ref取到的current总是null，关闭再次打开就可以正常取到。 这里的解决方法是：Modal组件中有一个属性为强制渲染 给Modal加上此属性即可 forceRender="true" ...
react antd-design Modal里加form表单，用ref回显数据，第一次打开取到的是null
qq_39352780的博客
11-30 6085
开始 react项目里，使用ui框架ant-design。table列表的每一行都有编辑按钮，点击编辑，弹窗Modal出现，里面使用Form表单，然后用ref回显数据。但是发现第一次点编辑打开弹窗，ref取到的current总是null，关闭再次打开就可以正常取到。 解决方法 Modal里有一个属性为强制渲染 给Modal加上此属性即可。 forceRender = {true} 上全部代码： import React, { Component } from 'react'; import { Fo
Vue3动态生成form表单校验遇到的问题。获取表单ref值是null。
wwwbaidusss的博客
03-27 2804
项目是基于vue3的项目，需求是点击添加按钮弹出modal对话框，对话框内是form表单，通过添加按钮动态添加表单然后提交。2、再遍历每个动态生成的表单并触发表单自带的validate方法并放到事先声明的数组中；3、再用Promise.all方法校验数组中的结果是否全部通过；遇到的问题：点击提交按钮需要校验所有表单项的必填项；1、在dataList数据中加入一个字段el；3、通过el属性可以拿到validate方法。思路：1、先声明一个数组接收校验结果；2、动态给form表单绑定ref值。
componentDidMount获取form的ref值为null
spray_wave的博客
08-10 1860
简单的复现代码如下： class FormModal extends Component{ constructor(props){ super() this.formRef = React.creatRef() this.state={ firstValue:"test" } } componentDidMount(){ this.refs.current.setFieldsValue({firstItem:this.state.firstValue}) //此时，会报错
新增和修改数据，封装一个组件，运用于不同页面和不同类型，form表单中有可编辑的表格（父子传值，antd-Form表单的二次封装）
ZHANGJIN9546的博客
12-26 994
import React, { Component } from 'react'; import { Table,Button,Input,Icon,Form,message,Modal,Select,DatePicker,Upload,Pagination,Tooltip,InputNumber,Col, Row,Radio,Tabs, Layout} from 'antd'; import {...
基于antd pro二次封装的组件库react-antd-super-form
szsk2021的博客
03-10 1635
基于antd pro二次封装的组件库react-antd-super-form 该组件库是我们对antd pro进行二次封装的一个偏业务层面的一个React ui组件库。 该组件库诞生的初衷？ 该组件库主要是为了提升中后台管理系统开发效率，将antd封装好的各个组件进行组合以达到页面高度配置化。 后台管理系统需求接触多了之后我们会发现各个模块间的区别其实并不大，无非就是表格、表单、弹窗这些组件里面嵌套各个粒度更小的组件。 所以我们就考虑一般组件封装都是将大的组件拆分成粒度更小的组件，那为什么
vue + antd 动态增加表单并进行表单校验
最新发布
FellAsleep的博客
11-16 1528
<template> <a-modal v-model:visible="visible" :title="formData.id ? '编辑渠道' : '添加渠道'" :width="850" :mask-closable="false" :destroy-on-close="true" @ok="onSubmit" @cancel="onClose" > <a-form ref="formRef" :model="formData" :
antdvue3 Form和modal一起使用 resetFields无效
04-06
在handleCancel方法中，我们首先获取form的ref，然后调用resetFields方法重置表单数据，最后将form的值设置为空对象{}，将visible的值设置为false，关闭modal。这样就能够使resetFields生效了。
react antd第一次调用 ref 的 From 为空解决
qq_50541792的博客
01-31 1053
react项目开发中，使用antd组件库在使用Modal组件嵌套From表单，点击触发showModal展示并将数据回显。第一次点击时提示绑定的ref获取的dom为空需要点击第二次才能获取到dom并回显数据。
Ant Design Modal 中嵌入Form表单后，initValue，不能动态获取最新值得问题
热门推荐
Meditate_MasterYi的博客
01-06 1万+
场景描述： 如下图所示，当我点击某个盒子的时候，我需要得到该盒子的数据， 问题：当我第一次点击的时候得到了当前的数据值，但是在点击其他的盒子的时候数据form中的数据还是上次的数据，并未更新。刷新页面后 出现当前盒子的数据信息，然后再次失效 Modal {...modalOpts} maskClosable={false}> Form layout="horizontal"
antd modal实例方法的获取
coderYYA的博客
02-22 888
父组件 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
Vue项目中，如何为遍历生成的form表单设置ref属性
qq_52569656的博客
08-17 3485
本文案例基于Vue3+Ts+ElementPlus技术栈，介绍如何通过一次点击事件来触发通过循环生成的多个表单校验
【vue && 弹窗】vue项目弹窗中的组件编辑ref值却获取不到
代码随想录
03-10 4077
vue项目中点击打开弹窗，弹窗上面有子组件，在点击打开弹窗的方法中使用this.$refs却获取不到子组件的ref值： 简易代码如下： <a-modal centered v-model="visible" :title="title"> <upload ref="upload" /> </a-modal> js: handleOpenUpload(){ this.visibleUpload = tr..
a-modal 初次未显示时，无法获取到其中包裹的子组件
Admin_yws的博客
03-26 1233
bug:主页面加载，未渲染模态框，无法通过this.$refs获取到其包裹的子组件 解决方法：forceRender=true使modal强制渲染
el-form 表单校验
weixin_30693683的博客
08-13 677
<el-form ref="dataForm" :model="dataForm" :rules="rules" label-width="60px" @keyup.enter.native="dataFormSubmitHandle()"> <el-form-item prop="name" label="姓名"> <el-input v-...
关于antd表单组件遇见的问题
张致豪
11-29 4568
公司在用antd+mobx做表单时遇见一些问题，自己解决并记录下来 业务需求 点击新增按钮时，弹出一个嵌入Form的Modal，填写完毕后验证表单 点击编辑按钮时，弹出上一个Modal，并将以前的填写信息回显上去 遇见的问题 问题1、表单验证后错误信息已经打印到控制台上，但页面中并没有显示错误信息 分析过程： 填写表单时触发onFieldsChange将变化的value存放到store中 ...
antd将嵌套表单的对话框组件化，实现编辑功能
kramer_light的博客
03-17 1559
问题 当使用对话框提交修改表单时，需要在输入框 Input 显示需要修改的数据，但使用 value 绑定对应数据，并未生效，具体代码如下： function YwkclbEdit (props) { .... const editData = props.data; .... } <Form.Item name='hzxm' label='患者姓名' > <Input placeholder="请输入患者姓名" value={editData.name
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值