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

最新推荐文章于 2023-08-17 15:12:24 发布
最新推荐文章于 2023-08-17 15:12:24 发布
阅读量2.5k 收藏 1
点赞数 4
分类专栏： react antd 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46264539/article/details/117390303
版权

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

Wg1xg
关注
  • 4
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ant-Design modal对话框未打开时，无法通过uesRef获取modal内部元素DOM节点
Yabokusama的博客
03-31 1447
Ant-Design modal对话框未打开时，无法通过uesRef获取modal内部元素DOM节点
ant design弹出框获取表单数据
m0_60353695的博客
07-21 2191
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 form表单数据回显操作
01-22
index页面有一个表格，有一个新增按钮，点击新增按钮或表格编辑弹出表单模块，如果是编辑，会回显对应的表格中的数据 //index页面 import React from 'react' import { Table, Button, message, Input, Select, Modal, } from 'antd'; const Option = Select.Option; import AddOrEdit from './AddOrEdit ' class List extends React.Component { constructor(props) { super(pr
Vue3.0使用antd时，打开Modal框时无法获取里面的dom节点
CSND7997的博客
06-11 3010
问题：打开模态框之前，如果原本后台存有值需要，如何填写到编辑框里面？ 测试方法1：在打开模态框的方法里面，获取dom节点然后innerHTML，比如 showModalList() { data.fxModel = true; document.getElementById("info")?.insertAdjacentHTML("afterbegin", props.fxValue); }, 报错document.getElementById(“info”)找不
Vue源码阅读（34）：异步组件的源码解析
f18855666661的博客
09-22 515
异步组件的官方文档点击这里。 借助于异步组件，我们可以将 Vue 项目按照组件分割成一些小的代码块，并且让这些代码块在前端需要时才从服务器进行加载。这种优化措施在大型应用中是很有必要的，可以大大缩短首次加载的时间。 在这里，建议读者先将 Vue 官网中的异步组件部分复习一遍，了解异步组件的写法。 1，异步组件的加载时机 首先说明一下异步组件触发加载的时间，异步组件的加载是在执行 render 函数创建vnode 的过程中，如果判断出当前创建 vnode 的组件是异步组件的话，则会执行 reso..
react antd Modal里Form设置值不起作用
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
05-31 1778
react antd Modal里Form设置值不起作用
antd将嵌套表单的对话框组件化，实现编辑功能
kramer_light的博客
03-17 1392
问题 当使用对话框提交修改表单时，需要在输入框 Input 显示需要修改的数据，但使用 value 绑定对应数据，并未生效，具体代码如下： function YwkclbEdit (props) { .... const editData = props.data; .... } <Form.Item name='hzxm' label='患者姓名' > <Input placeholder="请输入患者姓名" value={editData.name
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
10-15
在Vue.js应用中，我们经常需要处理添加和编辑数据的功能，而这些操作通常会使用到同一个表单。在本场景中，使用了Element UI库的`el-form`组件来构建表单，它提供了丰富的表单元素和表单验证功能。在实现添加和编辑...
解决antd Form 表单校验方法无响应的问题
01-18
antd 的 表单校验方法包括 validateFields 和 validateFieldsAndScroll 里面可以接收校验字段数组, options, 和一个回调函数 from.validateFields([name, age], {}, (err, val)=> {}) 校验全部表单数据 from....
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
01-18
场景描述： 如下图所示，点击减免天数会出现一个弹窗， 输入天数后点击确定，保存这个值， 但是我在点第二行...Form horizontal form={form}> <FormItem {...{labelCol: { span: 5 }, wrapperCol: { span: 16 }
在antd4.0中Form使用initialValue操作
01-18
然后我在网上看用resetFields()这个方法，每次提交或者取消之后重置一下数据，然而我试了还是不得行，会变成每次点击显示的是上一次的数据，所以后面还是老老实实看了一下form的其他方法。 贴个图 解决 放弃initial...
【antd】Instance created by `useForm` is not connected to any Form element.Forget to pass `form` prop?
mytac的博客
01-22 2912
Instance created by useForm is not connected to any Form element.Forget to pass form prop? 这个问题通常会在Modal里的Form种出现，这是因为在调用form.setFieldsValue(detail);时，form还未被关联到<Form>上 解决方法： 给modal组件添加forceRender属性，使其强制渲染 <Modal // .... forceRender >
react antd第一次调用 ref 的 From 为空解决
qq_50541792的博客
01-31 802
react项目开发中，使用antd组件库在使用Modal组件嵌套From表单，点击触发showModal展示并将数据回显。第一次点击时提示绑定的ref获取的dom为空需要点击第二次才能获取到dom并回显数据。
关于antd表单组件遇见的问题
张致豪
11-29 4463
公司在用antd+mobx做表单时遇见一些问题，自己解决并记录下来 业务需求 点击新增按钮时，弹出一个嵌入Form的Modal，填写完毕后验证表单 点击编辑按钮时，弹出上一个Modal，并将以前的填写信息回显上去 遇见的问题 问题1、表单验证后错误信息已经打印到控制台上，但页面中并没有显示错误信息 分析过程： 填写表单时触发onFieldsChange将变化的value存放到store中 ...
Vue项目中，如何为遍历生成的form表单设置ref属性
最新发布
qq_52569656的博客
08-17 2481
本文案例基于Vue3+Ts+ElementPlus技术栈，介绍如何通过一次点击事件来触发通过循环生成的多个表单校验
使用React Antd框架时，出现Modal里加form表单，用ref回显数据，第一次取到的是null
你是我修复不了的bug，但我会用一生去维护
11-23 1751
使用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 5520
开始 react项目里，使用ui框架ant-design。table列表的每一行都有编辑按钮，点击编辑，弹窗Modal出现，里面使用Form表单，然后用ref回显数据。但是发现第一次点编辑打开弹窗，ref取到的current总是null，关闭再次打开就可以正常取到。 解决方法 Modal里有一个属性为强制渲染 给Modal加上此属性即可。 forceRender = {true} 上全部代码： import React, { Component } from 'react'; import { Fo
Elementui 中el-form表单中的ref是干嘛用的
servepeople的博客
08-16 7574
属性，你可以在 Vue 组件中通过引用来访问和操作这个表单组件，而不需要通过 DOM 查询或其他方式。的实例，从而可以进行一系列操作，如表单验证、重置、获取表单数据等。属性可以在 Vue 组件的 JavaScript 部分直接访问。组件实例，从而方便地操作表单数据和执行相关操作。属性允许你在 Vue 组件中通过引用直接访问。是用来获取对该表单组件的引用的属性。，你可以在 Vue 组件的方法中使用。在 Element UI 的。在这个例子中，通过在。
element-UI 组件 dialog 中 ref 获取不到的问题解决方案
LJJONESEED的博客
12-06 5556
官方解释 Dialog 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。因此，如果需要执行 DOM 操作，或通过 ref 获取相应组件，请在 open 事件回调中进行。 解决方法： <el-dialog @open="show()"></el-dialog> show() { //防抖 setTimeout(() => { console.log(this.$refs); }, 0); }, ...
react antd 如何在Modal的确认按钮上获取Modal中From的表单数据
06-02
在React Antd中，可以使用`form`属性将`Modal`组件中的表单与父组件进行关联，然后在`Modal`中的确认按钮上通过`form.submit()`方法来获取表单数据。 具体实现步骤如下： 1. 在`Modal`组件中添加`form`属性，使表单与父组件进行关联： ```jsx import { Form, Input, Modal } from 'antd'; const MyModal = ({ visible, onCancel, onOk, form }) => { const { getFieldDecorator } = form; return ( <Modal visible={visible} onCancel={onCancel} onOk={onOk} > <Form> <Form.Item label="Username"> {getFieldDecorator('username', { rules: [{ required: true, message: 'Please input your username!' }], })(<Input />)} </Form.Item> <Form.Item label="Password"> {getFieldDecorator('password', { rules: [{ required: true, message: 'Please input your password!' }], })(<Input.Password />)} </Form.Item> </Form> </Modal> ); }; export default Form.create()(MyModal); ``` 2. 在`Modal`组件中的确认按钮上通过`form.submit()`方法来获取表单数据： ```jsx import { Form } from 'antd'; import MyModal from './MyModal'; const MyParentComponent = () => { const handleSubmit = (e) => { e.preventDefault(); const { form } = myFormRef.current; form.validateFields((err, values) => { if (!err) { console.log(values); // 输出表单数据 form.resetFields(); } }); }; const myFormRef = useRef(null); return ( <div> <button onClick={() => myModalRef.current.showModal()}>Open Modal</button> <MyModal wrappedComponentRef={(form) => myFormRef.current = form} visible={visible} onCancel={() => setVisible(false)} onOk={handleSubmit} /> </div> ); }; export default MyParentComponent; ``` 在上面的代码中，我们通过`form.validateFields(callback)`方法来校验表单数据，并且如果校验通过，就可以通过`values`参数获取到表单数据。同时，我们也可以通过`form.resetFields()`方法来重置表单数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值