React+antd Form表单遇到的坑

最新推荐文章于 2024-04-08 14:08:08 发布
最新推荐文章于 2024-04-08 14:08:08 发布
阅读量663 收藏
点赞数 1
分类专栏： React antd form 文章标签： reactjs typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44994372/article/details/114255295
版权
React 同时被 3 个专栏收录
3 篇文章 0 订阅
订阅专栏
antd
3 篇文章 0 订阅
订阅专栏
form
1 篇文章 0 订阅
订阅专栏

React+antd Form表单遇到的坑

React+antd Form表单遇到的坑

需求说明

因为antd里面textarea自带的有显示输入文本的数字字数的，而input就要单独写，校验规则有些也要自己写，时间紧急，直接上代码

在这里插入图片描述

切记《form.item》里面只能有一个元素，文档里面有说明，否则点击提交按钮的时候，就算你已经填写了input里面的name值，也是获取不到的，所以在外面加一个div，把<form.item>和span（显示输入字数）包在一起。在这里插入图片描述
加入提交操作是放在Modal里面的，要是不想用modal表单自带的提交按钮

在这里插入图片描述

在这里插入图片描述

喜欢这种平淡的生活�
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
react+antd拖拽生成自定义表单.rar
06-08
首先，让我们了解一下`react+antd拖拽生成自定义表单.rar`这个项目的核心概念。项目使用TypeScript（TS）进行编写，这是一种在JavaScript基础上添加静态类型检查的超集。TypeScript提供更好的代码工具支持，有助于...
form表单遇的坑（react）
Realizee的博客
08-18 1799
1.Modal 中直接调用 form 控制台会报错 因为在调用 form 方法时，Modal 还未初始化导致 form 没有关联任何 Form 组件。 通过Form.useForm对表单数据域进行交互。 注意useForm是React Hooks的实现，只能用于函数组件，class 组件通过ref获取数据域。 const [ form ] = Form.UseForm( ) <Form form = {form} // form的控制实例 name ...
【实战】React 实战项目常见报错 —— Instance created by `useForm` is not connected to any Form element. Forget...
程序边界
06-08 1083
官方文档说：这是因为你在调用 form 方法时，Modal 还未初始化导致 form 没有关联任何 Form 组件。你可以通过给 Modal 设置 forceRender 将其预渲染。useForm 中提取的 form 相对 props.form 有哪些不同？
前端React+antd Form提交空表单无反应不报错
qq_38312741的博客
06-29 1093
用antd的Form表单写了一个创建功能，里面包含自定义的校验 在不输入任何参数的时候点击确定没有任何错误提示 这就奇怪了 经过排查发现取消ip地址校验再提交空白表单就会有错误提示，那么问题就定位到ip地址校验上了 检查ip地址校验的时候发现对错误的ip地址也能抛出错误 只是在什么都不输入的时候没有校验所以能够判断出是因为ipTest中没有对value进行非空校验导致的不抛错，所以对代码进行修改 增加空值判断，问题解决...
react+Antd 表单清空的坑和排错填坑
Ccc67ol的博客
12-15 1796
基于react的登录页面校验失败实现表单清空。
react ant3 From表单报错:`value` is not validate prop, do you mean `checked`?
weixin_43749669的博客
07-08 1099
最近迭代一个原本就很成熟的的 react 项目, 他用到 ant3 下面讲下 我的报错场景 : 需求 需要一个 开关, 这个开关 会根据当前项目的id , 展示 它 一开始 是否开启或者关闭的状态. 也就是说 我这个 Switch 要根据 后台返回的字段 回显状态 问题就是 : 有字段 并且也是 Boolean , 但 回显不了 !!!上原代码: 原代码效果图: 网上查了下 ,说 defaultChecked 可控制回显, 看实验版如下 : 终极解决: 用到 valuePropName 文档说 ,它
React+antd后台管理系统模板
12-01
React和antd结合使用，可以轻松处理这些交互，例如使用antd的Form组件进行表单数据收集，以及通过React的状态管理和生命周期方法控制组件的行为。 5. **项目结构**：典型的React项目结构通常包含src目录，其中包含...
React+Antd-可视化拖拽表单
12-03
基于react结合antd-form，实现可视化表单拖拽，左侧为自定义所有的组件，中间为工作区，拖拽左侧到工作区，目前可以进行删除等操作，可以自己再优化添加其他功能，右侧为组件名称，描述等，可以自己优化添加其他。...
【JavaScript源代码】react+antd.3x实现ip输入框.docx
12-29
通过这个实例，我们可以看到如何利用React和Ant Design库构建一个具有特定行为的复杂表单组件，同时也展示了React组件间通信和状态管理的基本原理。在实际开发中，这样的组件可以被复用，提高代码的可维护性和效率。
umi+react+antd 增删改查
10-20
Ant Design的表单组件可以和React的Form控件配合，实现数据的双向绑定，方便数据的获取和提交。对于CRUD操作，我们通常会有一个后台接口服务，通过fetch或者axios等库发送HTTP请求，完成数据的增删改查操作。 总的...
react antd 表单提交触发校验
倚树探星的博客
06-18 1万+
步骤 表单校验的过程可以分为为两步：（1）给表单添加校验规则；（2）提交时触发校验方法 注意 声明：本文讲的是在 class 组件中的表单校验 需要注意几点： 调用校验方法 validateFields() 需要通过注册的 form 在 class 组件中注册 form 和函数组件不同，是通过 ref 属性 官网说明 实例代码 import {Form} } from "antd" export default class AddOne extends Component { formRef =
antd表单1行使用多个组件（控件）
蓝枫秋千的踩坑记录
08-19 3474
引言 在antd的表单组件中，自己封装好了一系列的函数和高阶函数，自带的样式和方法等都能满足自己的需求。 但是各种案例中都只能够是一个控件，并且文档中也说明了： 注意：一个 Form.Item 建议只放一个被 getFieldDecorator 装饰过的 child，当有多个被装饰过的 child 时，help required validateStatus 无法自动生成。 业务场景 那么假如想要有这么一个效果。 方案 我初步设想的是这样的布局：使用div的flex布局 然后发现需要改挺多样式的，并且报
Form 表单内有多个元素的使用方式
zm_miner的博客
04-16 2866
产品中常有的一个需求 输入框后面有描述文案或其他组件 我们可能这样写 <Form.Item name="firstName" label="姓名" rules={[{ required: true, message: '请输入姓名!' }]} > <Row gutter={8}> <Col span={12}> <Input defaultValue={detail?.firstName} /> &
FormItem 下多个组件问题
一起学习前端知识，一起成为前端开发工程师！
03-09 1113
一般FormItem内只会有一个组件，因此，FormItem会通过name取到值传给对应组件，但当时FormItem下存在多个组件时，该如何解决呢？通过将对应需要取到值的组件再包一层FormItem，将外层FormItem的name拿给内层的FormItem，在对内层写上rules即可！
antd库form表单
过客如期的博客
05-30 1639
一，前言 1.form表单用于进行数据的收集，校验，提交等功能。 二，组件和属性介绍 1.<Form><Form/> 2.<Form.Item><Form.Item/> （1）lable: 表单元素前的lable （2）colon：是否显示lable后面的冒号 三， Form.create()() 1.使用from.create()(Demo)高阶组件，会自动给组件包装form属性。 四，from属性 1.getFieldDecorator（keys,opti
React利用Antd的Form组件实现表单功能
热门推荐
GuanJdoJ的博客
10-23 2万+
========2023.2.17更新======== 现在ant.design已进入V5版本，表单基础用法和V4基本一致，代码示例如下：
antd中的form表单用法笔记
Fs670267542的博客
11-26 5298
这是我的表单结构,引用的antd中的Form表单,里面有四个From.Item (这里的Row,Col可以忽略,因为我包个外层结构好布局样式) 我的需求 1.在此处点击添加是需要收集到这个skuId ,以这个skuId为参数去调用接口,去匹配拿到到一组数据,展示到下面的表格中. 收集某个From.Item中的数据用到的方法getFieldsValue, 拿值怎么拿,需要把From定义成一个可控组件,也就是给它加一个ref,通过标签获取它上面的值,看代码 这两步就可以给标签添加一个...
antd 的 Form 组件实例的方法（常用）
最新发布
CASD_HYZ的博客
04-08 1306
form属性：经 Form.useForm()创建的 form 控制实例，不提供时会自动创建。
react+antd清空表单
05-30
在React中，清空表单可以通过Antd的Form组件提供的`resetFields`方法来实现。具体步骤如下： 1. 在表单的父组件中引入`Form`组件，并将表单的所有控件都用`Form.Item`包裹起来，每个`Form.Item`需要设置`name`属性...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值