使用React Antd框架时，出现Modal里加form表单，用ref回显数据，第一次取到的是null

最新推荐文章于 2023-08-29 16:46:37 发布
最新推荐文章于 2023-08-29 16:46:37 发布
阅读量1.7k 收藏 5
点赞数 7
分类专栏： React 文章标签： 前端 javascript react js 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47809584/article/details/121504992
版权

使用React Antd框架时，出现Modal里加form表单，用ref回显数据，第一次取到的是null

在react项目里，使用ui框架ant-design。table列表的每一行都有编辑按钮，点击编辑，弹窗Modal出现，里面使用Form表单，然后用ref回显数据。但是发现第一次取的时候，ref取到的current总是null，关闭再次打开就可以正常取到。
这里的解决方法是：Modal组件中有一个属性为强制渲染
在这里插入图片描述

给Modal加上此属性即可

forceRender="true"
.ToString()°
关注
  • 7
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
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
antd Modal中添加Form表单，数据回填时通过ref方式第一次打开页面时current是null 的解决方式
weixin_44233592的博客
09-22 3098
我希望网上的方法有效在放到网上，没效果浪费大家的时间，取不到原因不说了，解决方案： Modal的API中有一个强制渲染的属性 forceRender={true} 第一次取就可以取到了，只是会把渲染的先隐藏起来，可能会浪费些渲染性能。性能这块不是我们目前首先考虑的问题。 ...
React之ref详细用法
weixin_33939380的博客
03-12 1102
在react典型的数据流中，props传递是父子组件交互的唯一方式；通过传递一个新的props值来使子组件重新re-render,从而达到父子组件通信。当然，就像react官网所描述的一样，在react典型的数据量之外，某些情况下（例如和第三方的dom库整合，或者某个dom元素focus等）为了修改子组件我们可能需要另一种方式，这就是re...
antd Modal中添加Form表单用ref获取数据，第一次打开取到的是null
weixin_46264539的博客
05-29 2538
Modal的 API中有一个强制渲染的属性 给Modal加上此属性即可。 forceRender={true} 第一次取就可以取到了，只是会把渲染的先隐藏起来，可能会浪费些渲染性能。
componentDidMount获取form的ref值为null
spray_wave的博客
08-10 1733
简单的复现代码如下： class FormModal extends Component{ constructor(props){ super() this.formRef = React.creatRef() this.state={ firstValue:"test" } } componentDidMount(){ this.refs.current.setFieldsValue({firstItem:this.state.firstValue}) //此时，会报错
react使用antd表单赋值,用于修改弹框的操作
01-18
补充知识：react中使用antd的表单重置数据 resetFields 重置一组输入控件的值（为 initialValue）与状态，如不传入参数，则重置所有组件 Function([names: string[]]) 注：initialValue有值时会
在react项目中使用antd的form组件,动态设置input框的值
01-18
点击保存之后，对表单进行了验证，导致之后请求的数据无法在更新到input框中，也就是说即使在state中有值，也不会更新initialValue值，就导致搜索后的值不能正确填入input中，表单也就提交不了。 解决办法： 不使用...
在react-antd中弹出层form内容传递给父组件的操作
01-21
import { Form, Input} from 'antd'; const FormItem = Form.Item; class Forms extends Component{ getItemsValue = ()=>{ //3、自定义方法，用来传递数据（需要在父组件中调用获取数据） const values= this....
antd Form组件行并列显示 Form表单属性为inline时,表单组件宽度问题
01-06
Form标签 layout属性设置为’inline’ 时 下拉组件宽度没有自适应: // 方法1:用Row + Col 定义自己需要的宽度,把layout属性设置为'horizontal', const formLayout = { labelCol: { span: 4 }, wrapperCol: { ...
react antd中Modal包裹Form组件用
zhaojikun521521的博客
05-12 3690
运用场景： 需要弹出对话框，对话框包含form表单，如何在对话框中，获取form表单中的数据库呢。 网络案例 对话框： //有问题的modal <Modal title="开通城市" visible={this.state.isShowOpenCity} onCancel={()=>{ this.setState({ isShowOpenCity:false }) }} onOk={()
react antd-design Modal里加form表单，用ref回显数据，第一次打开取到的是null
qq_39352780的博客
11-30 5498
开始 react项目里，使用ui框架ant-design。table列表的每一行都有编辑按钮，点击编辑，弹窗Modal出现，里面使用Form表单，然后用ref回显数据。但是发现第一次点编辑打开弹窗，ref取到的current总是null，关闭再次打开就可以正常取到。 解决方法 Modal里有一个属性为强制渲染 给Modal加上此属性即可。 forceRender = {true} 上全部代码： import React, { Component } from 'react'; import { Fo
react使用ref获取和修改form表单
weixin_45676738的博客
04-21 4014
调用form页面 构造函数加入 this.forms = React.createRef() 调用这里是用了Modal展开 <Modal title={"新增预警池"} visible={visible} confirmLoading={saveLoading1} destroyOnClose={true}
react antd Modal里Form设置值不起作用
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
05-31 1765
react antd Modal里Form设置值不起作用
Ant design pro-项目探究（5）react基础知识解决页面数据处理
weixin_45229417的博客
03-04 798
前端利用请求参数、界面与数据进行整合，构成前端的展示。对于状态的一些调用，react中拥有useState,useEffect,useRef方式来实现前端状态的利用，了解这些方式的运用，对开发界面化来说提供了非常大的便捷之处
React Hooks From 表单回显问题 父子组件数据传值
weixin_42247563的博客
12-08 602
react
react&antd（12）动态表单的默认值问题
最新发布
郑板桥30的博客
08-29 854
动态表单的默认值问题
Vue3动态生成form表单校验遇到的问题。获取表单ref值是null。
wwwbaidusss的博客
03-27 2163
项目是基于vue3的项目，需求是点击添加按钮弹出modal对话框，对话框内是form表单，通过添加按钮动态添加表单然后提交。2、再遍历每个动态生成的表单并触发表单自带的validate方法并放到事先声明的数组中；3、再用Promise.all方法校验数组中的结果是否全部通过；遇到的问题：点击提交按钮需要校验所有表单项的必填项；1、在dataList数据中加入一个字段el；3、通过el属性可以拿到validate方法。思路：1、先声明一个数组接收校验结果；2、动态给form表单绑定ref值。
为什么使用Form的ref.current.setFiledsValue()时不了值了?
weixin_39238520的博客
04-01 1922
问题描述：在第一次打开modal时，通过用实例ref设置的值是不生效的 如图，点击修改打开弹窗前，数据，使用的设值方法都是正确的。但是打开的弹窗值为空。 原因如图，经过断点之后，发现ref的实例为undefined，因为第一次使用modal时，此时还没渲染dom节点到dom中，没有实例是很正常的。至于后来的，但是第二次打开之后，可以发现，此时已经正常使用。 下图是第二次点击。 第二次点击结果如下图，可以看到此时是正常的。 解决：第一次使用ref实例，因为还没有dom节点，使用ref当然获取不到实例
react ts antd 表单数据回显
04-30
在使用React+TypeScript+Antd进行表单开发时，数据回显是一个常见需求。在实现数据回显的过程中，需要以下步骤： 1. 定义表单数据的接口类型。在React+TypeScript中，需要事先定义表单数据的类型，这样可以确保表单...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

.ToString()°

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值