解决react+Antd@4 中Form表单中的input的回显木有东西

最新推荐文章于 2024-06-14 10:14:02 发布
最新推荐文章于 2024-06-14 10:14:02 发布
阅读量1.6k 收藏 4
点赞数 3
文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Oublieasd/article/details/119546621
版权
在使用Ant Design 4.x版本的Form组件时，遇到输入框无法回显数据的问题。尝试了旧版API如getFieldDecorator，但发现该API在新版本中已移除。通过查阅文档，找到了新的解决方案，即利用Form.Item的initialValue属性进行赋值，确保键值与name属性匹配，从而实现数据的回显。
摘要由CSDN通过智能技术生成

今天敲代码的时候用antd4，在form表单里想实现一个数据的回显，显示到input框中，所以我就用了最原始的办法

 但是我发现这样出来是没有数据的

 然后我就马不停蹄的开始对着度娘各种问 ，得到的答案无非是使用getFieldDecorator函数之类的操作，但是antd4中已经没有这api了，这个属于3.x的api。原理是因为外层包裹的div对数据阻隔了，因此数据进不来，value赋值也没用

 之后我又去了半天的文档突然发现了新大陆

 initialValues ，这个属于Form之中的api，我去搜索他，果然发现了他的奇妙之处。首先他的内容是一个对象，那么我们就应该知道如果要赋值，他的第一个大括号是用来写js，第二个大括号才是内容。顺势写个张三上去&#x

最低0.47元/天 解锁文章
Calvin416
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react +ts class antd input 接口返回数据回显_使用 react hooks 获取全局数据
weixin_30211217的博客
02-04 894
随着 react@16.8 hooks 的正式发布，如何优雅的使用 hooks 成了值得我们考虑的问题，在此我不再赘述 hooks 给 react 的写法带来的改变，而是介绍一个新的 hook。试想有这样一个 hookconst { user } = useProps('user'); 如果我们有这样一个 hook，可以在全局的 store 中得到变量，同时解决了 useState 不能在组件之间...
react +ts class antd input 接口返回数据回显_简单用 React+Redux+TypeScript 实现一个 TodoApp (三)...
weixin_35398720的博客
02-02 325
前言 上一篇文章[1]讲了讲如何结合 Redux Thunk 完成 store 中核心 Todo 切片的状态编写. 由于关于 store 部分已经全部完成了, 这篇主要谈一谈如何使用 React-Redux 结合 React Hooks 来完成 UI 部分该篇也是本系列最后一篇文章想跳过文章直接看代码的: 完整代码[2]最后的效果:思路 这里我简单就分为三个组件:AppTodoAppT...
React之antd Form回显数据
Welkin_qing的博客
11-23 8638
文章目录一、antd4如何回显数据1. 定义变量2. 保存接口数据到form变量中3. form显示数据 一、antd4如何回显数据 1. 定义变量 const [form] = Form.useForm() 2. 保存接口数据到form变量中 const requestProfileList = useCallback(async () => { try { const { result } = await fetchProfileListRequest() for
antd form嵌套标签无法回显
最新发布
weixin_45605450的博客
06-14 505
antd 表单回显问题
react antd对话框里面input的数据回显
qq_48211147的博客
08-13 3533
最开始使用initialValues设置里里面的值，然后用setName修改，但是这样导致了当你点击张三的名字后，再点击李四的名字，出现的还是张三的名字，然后点击取消的一瞬间，才会重新渲染成李四的名字。............
关于react输入框回显问题
m0_71966801的博客
11-11 912
在handleSubmit函数中，我们通过调用setDisplayText来更新displayText状态变量，然后将inputValue重置为空字符串。在handleSubmit函数中，防止默认表单提交行为，并将用户输入的值传递给一个显示组件。最后，在表单元素中，我们绑定了handleSubmit函数到onSubmit事件上，这样可以在用户单击提交按钮时调用函数。例如，对于一个文本框，可以使用onChange事件将用户输入的值绑定到组件状态中。这个函数通常会使用组件状态中的值来更新页面上的数据。
react封装函数_封装React AntD的form表单组件
weixin_39548805的博客
12-19 1228
form表单在我们日常的开发过程中被使用到的概率还是很大的，比如包含了登录、注册、修改个人信息、新增修改业务数据等的公司内部管理系统。而在使用时这些表单的样式如高度、上下边距、边框、圆角、阴影、高亮等等都大同小异、大差不差且表单的功能基本相似，所以很有必要对这些表单来一个简单的封装。其实，封装组件的意义我们在上一篇封装react antd的表格table组件中已经介绍过了，这里不再做过多的描述了，...
antd form表单数据回显操作
01-22
index页面有一个表格，有一个新增按钮，点击新增按钮或表格编辑弹出表单模块，如果是编辑，会回显对应的表格中的数据 //index页面 import React from 'react' import { Table, Button, message, Input, Select, ...
antd 的form 表单怎么回显数据_封装react antd的form表单组件
weixin_35565522的博客
12-30 2784
form表单在我们日常的开发过程中被使用到的概率还是很大的，比如包含了登录、注册、修改个人信息、新增修改业务数据等的公司内部管理系统。而在使用时这些表单的样式如高度、上下边距、边框、圆角、阴影、高亮等等都大同小异、大差不差且表单的功能基本相似，所以很有必要对这些表单来一个简单的封装。其实，封装组件的意义我们在上一篇封装react antd的表格table组件中已经介绍过了，这里不再做过多的描述了，...
react+antd - Form 保存input 的值
Colbru的博客
03-15 363
/ 添加合同列表数据 constructor(props) {//通过传参的方式 setdata =(objname , key) = > {
react + antdesign入门(二) 编辑表格数据,将数据回显到表单内
weixin_44514665的博客
02-11 3278
111
自我备份之react antd form表单回显踩坑
lxy7809的博客
03-09 2458
需求如下 在弹窗里显示一个表单，并进行回显，涉及到的组件有，简单的input框，inputNumber框，select，此处前端懒得让后端写接口点击自己获取到form表单里的数据，方法也不难 在链接处添加点击事件 代码如下（简单记录） onClick={() => this.getInformation(info)} //此处是点击事件的方法 getInformation = (info) => { //此处打印的东西见下图 console.log(info)..
antd 的form 表单怎么回显数据_antd design Form动态增减表单项（多个）,组装数据及编辑回显，选择初始值，控制添加减少表单项数量等...
weixin_30047059的博客
12-30 1518
新增效果图如下编辑效果图如下 代码如下const {salesFollow: { info },form: { getFieldDecorator, getFieldValue },} = this.props;const formItemLayout = {labelCol: { span: 4 },wrapperCol: { span: 12 },};getFieldDecorator('ke...
react+AntDesign Form表单编辑进行回显
weixin_43609391的博客
03-19 3474
class Information extends React.Component{ formRef = React.createRef() // 第一步 constructor(props) { super(props); this.state = { name：'', bundleId: '' }; this.getEditData(); } // 获取APP列表信息 getEditData(){ this.formR
form提交后台注解拿不到数据_react的form表单：关于获取表单数据
weixin_39523887的博客
11-21 537
被师傅分配一个任务，是修改原有的界面的一个组件，就是将自定义的input组件换成select组件，但是由于返回值不一样，导致我需要对相应组件的返回值加一层封装，不然就要改后台的数据：由于select组件的可选项是固定的，那么这里可以走一个捷径，就是说可以利用setState来改变props传过来的值。在这里我陷入一个误区，在一篇博客中找到了答案：react中的setState的使用和深入理解 - ...
Ant Design Form表单 编辑数据 数据回显
peter的博客
06-10 6957
1.给Form表单添加ref事件 <Form name="nest-messages" ref={this.formRef} layout={'vertical'}> <Row gutter={24}> <Form.Item name={'id'} > <Input type={"hidden"}/>
一个按钮提交两个form表单_【第1535期】前端 Form 的表单的一个通用解决方案
weixin_39751391的博客
11-23 1818
前言今日早读文章由阿里@布达投稿分享。@布达，Alibaba Fusion项目组的。花名潕量。主要专注在设计系统、组件、可视化搭建这个领域正文从这开始～～Fusion Next - Form 表单解决方案前端的Form 表单主要用于解决数据获取、数据校验、数据赋值 这三大类问题。这篇文章里面的提供的解决方案能够比较完美的用在 React 框架上，但是解决问题的思路相信应该是可以使用于任何...
webpack+react+antd脚手架性能优化实战
在优化webpack+react+antd的脚手架时，我们可以关注以下几个方面： 1. 样式分离： 为了提高页面加载速度，可以使用`extract-text-webpack-plugin`将CSS、LESS和SASS文件从JS文件中分离出来，单独打包成静态资源。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值