antd的form踩坑记录getFieldDecorator

最新推荐文章于 2022-11-07 19:04:07 发布
原创 最新推荐文章于 2022-11-07 19:04:07 发布 · 1.2k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端

本文讲述了在使用antd库的form组件时遇到的'getFieldDecorator'未定义错误，通过排查发现是由于form组件未正确导入。解决方法是确保在导出组件时应用了form.create()方法。

在使用antd的form表单时，遇到如下报错：
Cannot read property 'getFieldDecorator' of undefined
无法读取未定义的属性“getFieldDecorator”
在这里插入图片描述
但是明明是复制的antd官网的示例，也是从this.props.form里解构出来的，怎么会报错呢？

    const {
   
    getFieldDecorator } = this.props.form;

原来是找不到form。

解决办法：
在最后导出的时候改变写法，如下

export default Form.create
最低0.47元/天 解锁文章
antd vue 表单中getFieldDecorator、getFieldValue、setFieldValue用法
weixin_50367873的博客
10-13 4627
ant design of vue form表单 Ant Design 表单中getFieldDecorator、getFieldValue、setFieldValue用法
Form getFieldDecorator 传入函数组件控制台报错探究
花神的博客
12-23 2323
使用 antd3 的 Form 进行开发时经常需要自定义一些组件，之前都是使用类组件实现，没有问题，但是自从 hooks 发布后，目前开发基本转向了函数组件，但是 Form getFieldDecorator 传入函数组件控制台会出现错误提示。 假如我们定义如下的组件： import React, { useRef } from "react"; import { Form, Input } from 'antd'; const TextInput = () => { return <
碎片化学习（踩坑）笔记
weixin_51719919的博客
01-18 2325
1、antd——table的使用 需求描述：react中获取后端返回数组的index编号作为table里的序号 需要在Table的属性columns中写： { title: '序号', dataIndex: 'index', render: (text, record, index) => index + 1, } 2、使用getFieldDecorator时报错getFieldDecorator is not defined： 页面报错：ReferenceError: getFie
antd中getFieldDecorator的应用
XUAN_1995的博客
11-28 3万+
antd的Form中弃用了getFieldProps，改为了getFieldDecorator，现在记录一下相关的用法。 getFieldDecorator用于数据的交互反馈 之前对于getFieldProps，首先定义是const {getFieldProps} = this.props.form; 现在对于getFieldDecorator，没有变化const {getFieldProps} ...
antd form表单的getFieldDecorator，validateFields，getFieldValue，setFieldsValue用法
续得木槿的博客
04-16 8843
1.getFieldDecorator getFieldDecorator是一个方法，这个方法接收两个参数，第一个是表单的字段对象，第二个是验证规则。这个方法本身返回一个方法，需要将需要获取值的标签包裹进去。 <From> <Form.Item label="月份："> {getFieldDecorator('summaryDate', { initialValue: '', rules: [{ required: true, message
antd form表单数据回显操作
01-22
import { Table, Button, message, Input, Select, Modal, } from 'antd'; const Option = Select.Option; import AddOrEdit from './AddOrEdit ' class List extends React.Component { constructor(props) { ...
antd Form组件行并列显示 Form表单属性为inline时,表单组件宽度问题
01-06
Form标签 layout属性设置为’inline’ 时 下拉组件宽度没有自适应: // 方法1:用Row + Col 定义自己需要的宽度,把layout属性设置为'horizontal', const formLayout = { labelCol: { span: 4 }, wrapperCol: { ...
解决antd Form 表单校验方法无响应的问题
01-18
antd 的 表单校验方法包括 validateFields 和 validateFieldsAndScroll 里面可以接收校验字段数组, options, 和一个回调函数 from.validateFields([name, age], {}, (err, val)=> {}) 校验全部表单数据 from....
antd form 封装可搜索可输入select
03-29
antd form 封装可搜索可输入select
antd中Form及其getFieldDecorator的应用
weixin_43550660的博客
10-11 5852
antd中Form及其getFieldDecorator的应用 import React from 'react' import {Card,Form,Input,Button,message} from 'antd' const FormItem= Form.Item; class FormLogin extends React.Component{ handleSubmit=(...
使用antd的Form.create包装组件，用到getFieldDecorator方法来收集表单数据时出现的页面更新问题
WDboke的博客
10-14 786
一，需求 说明：添加多个司机信息并带有删除功能，整体看下来是没什么难度的，定义一个数组用来存司机信息，然后用map循环遍历一下构建出基本的结构，添加用push方法，删除用splice的索引删除方法，但问题就出在每次进行删除操作时，不管点击第几行数据的删除按钮，都删除最后一行数据！！就离谱~ 因为之前有做过类似的功能，就还是按照之前的思路写的，前几次的功能是没有问题的，只有这次遇到了这种情况，反复思考到底是哪一步出了问题……，之后想到以前实现这个功能时都是用的原生输入框，单独收集数据，这次用的是组件自
Antd中的getFieldDecorator用法和注意事项
r8577的博客
11-07 9233
getFieldDecorator ( “自定义控件名”，{ 表单规则 } ) (“取值标签” )第二个括号中的组件用一个气泡组件包裹的时候。监听不到input输入框内容的变化。
antd state使用_使用antd 的Form组件getFieldDecorator动态设置初始值问题
weixin_39826342的博客
12-21 1288
如图，点击编辑的时候会弹出一个Modal,在Modal中先在Input中显示各自的名称，然后可以修改<FormItemlabel="名称"{...formItemLayout}>{getFieldDecorator('name', {initialValue:record.name || '',rules: [{required: true, message: '名称不能为空'}],}...
getFieldDecorator用法（一）——登录表单
qq_36150631的博客
10-25 1万+
之前使用antd的ui表单，却没发现这么好用的用法，推荐给大家 import React from "react"; import { Card, Form, Input, Button, message, Icon, Checkbox } from "antd"; const FormItem = Form.Item; class FormLogin extends React.Compon...
ant Design2和4 Form组件getFieldDecorator去空格(正则)
weixin_44953227的博客
11-29 9876
去空格代码 getValueFromEvent: event => event.target.value.replace(/\s+/g, ''), 使用 <FormItem label="库箱号" {...ItemLayout}> {getFieldDecorator('ctnNo', { getValueFromEvent: event => event.tar...
react 父子传值_React学习——通过模态框中的表单学习父子组件之间传值
weixin_29246195的博客
12-30 541
import { button, modal, form, input, radio } from 'antd';const collectioncreateform = form.create({ name: 'form_in_modal' })(// eslint-disable-next-lineclass extends react.component {render() {const {...
ant design (antd) FormItem getFieldDecorator Checkbox 无法选中的解决方案
wyk304443164的专栏
05-11 2万+
本文出自： http://blog.csdn.net/wyk304443164 先给案例：<FormItem {...formItemLayout} label="销售方式" > {getFieldDecorator('is_alone_buy', { rules: [{ required: true, message: '请选择销
Ant Design Form表单中getFieldDecorator使用异常总结
热门推荐
云生流长的博客
04-04 7万+
背景：在使用Ant Design Form组件时，Form组件提供了一个create方法，使用form.create()(component)处理之后的component 会接收到一个props.form，使用props.form下的一系列方法，便可以很方便的写出具备自动校验功能的表单。代码如下所示： // 使用 Form.create 处理后的表单具有自动收集数据并校验的功能 const S...
antd ModalForm 多条记录
最新发布
02-28
import { Button, Modal, Form, Input } from 'antd'; const CustomizedForm = ({ visible, onCancel, onOk, initialValues }) => { const [form] = Form.useForm(); useEffect(() => { if (visible && initial...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值