React+antd Form表单遇到的坑

最新推荐文章于 2023-06-08 19:10:20 发布
最新推荐文章于 2023-06-08 19:10:20 发布
阅读量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
    评论
专栏目录
antd form踩坑记---从后端获取得到的数据不能渲染到input组件里
supercolorpower的博客
09-27 2425
<InputGroup compact> <label htmlFor className={applyStyle.formLabel}> 商务订单编号 </label> <FormItem className={applyStyle....
antdform表单的坑
qq_36262295的博客
09-24 772
antd 表单 受控组件 表单数据是由 React 组件来管理的 个人觉得最好，不要用受控组件，除非必要 如果一个 input 表单元素的值是由 React 控制，就其称为受控组件 当用户将数据输入到受控组件时，会触发修改状态的事件处理器， 这时由你的代码来决定此输入是否有效 受控组件，通过value,defaultValue,onchange来控制 受控组件，值由value来控制 非受控组件 表单数据将交由 DOM 节点来处理 一个非受控组件，就像是运行在 React 体系之外的表单元素 要编写一个非受
antd表单验证的坑
luck_lin
10-28 4251
坑一： Form.Item中的表单如果是调用的react子组件，则表单验证功能失效，请看例子： 表单父组组件： Item组件： 这样虽然能正常渲染出组件样式，但是会导致submit功能Bug和resetFields功能失效，如下图： 解决办法： 刚开始我以为是我哪里写得不对，找了很久原因，把子组件换class写法函数写法都试了，甚至把子组件搬到父组件同一个文件中都还是不行，...
react中返回表单组件的小坑
热门推荐
李晨毅的博客
02-07 2万+
import React from 'react' export default class CmtListUpdateEvent extends React.Component { constructor(){ super() this.state = {} } render(){ return &lt;div&gt;&lt;input type="button" value="...
【实战】React 实战项目常见报错 —— Instance created by `useForm` is not connected to any Form element. Forget...
最新发布
程序边界
06-08 1055
官方文档说：这是因为你在调用 form 方法时，Modal 还未初始化导致 form 没有关联任何 Form 组件。你可以通过给 Modal 设置 forceRender 将其预渲染。useForm 中提取的 form 相对 props.form 有哪些不同？
react+antd拖拽生成自定义表单.rar
06-08
首先，让我们了解一下`react+antd拖拽生成自定义表单.rar`这个项目的核心概念。项目使用TypeScript（TS）进行编写，这是一种在JavaScript基础上添加静态类型检查的超集。TypeScript提供更好的代码工具支持，有助于...
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 ant3 From表单报错:`value` is not validate prop, do you mean `checked`?
weixin_43749669的博客
07-08 1098
最近迭代一个原本就很成熟的的 react 项目, 他用到 ant3 下面讲下 我的报错场景 : 需求 需要一个 开关, 这个开关 会根据当前项目的id , 展示 它 一开始 是否开启或者关闭的状态. 也就是说 我这个 Switch 要根据 后台返回的字段 回显状态 问题就是 : 有字段 并且也是 Boolean , 但 回显不了 !!!上原代码: 原代码效果图: 网上查了下 ,说 defaultChecked 可控制回显, 看实验版如下 : 终极解决: 用到 valuePropName 文档说 ,它
react antd 表单提交触发校验
倚树探星的博客
06-18 1万+
步骤 表单校验的过程可以分为为两步：（1）给表单添加校验规则；（2）提交时触发校验方法 注意 声明：本文讲的是在 class 组件中的表单校验 需要注意几点： 调用校验方法 validateFields() 需要通过注册的 form 在 class 组件中注册 form 和函数组件不同，是通过 ref 属性 官网说明 实例代码 import {Form} } from "antd" export default class AddOne extends Component { formRef =
前端React+antd Form提交空表单无反应不报错
qq_38312741的博客
06-29 1088
用antd的Form表单写了一个创建功能，里面包含自定义的校验 在不输入任何参数的时候点击确定没有任何错误提示 这就奇怪了 经过排查发现取消ip地址校验再提交空白表单就会有错误提示，那么问题就定位到ip地址校验上了 检查ip地址校验的时候发现对错误的ip地址也能抛出错误 只是在什么都不输入的时候没有校验所以能够判断出是因为ipTest中没有对value进行非空校验导致的不抛错，所以对代码进行修改 增加空值判断，问题解决...
form表单遇的坑（react）
Realizee的博客
08-18 1797
1.Modal 中直接调用 form 控制台会报错 因为在调用 form 方法时，Modal 还未初始化导致 form 没有关联任何 Form 组件。 通过Form.useForm对表单数据域进行交互。 注意useForm是React Hooks的实现，只能用于函数组件，class 组件通过ref获取数据域。 const [ form ] = Form.UseForm( ) <Form form = {form} // form的控制实例 name ...
react+Antd 表单清空的坑和排错填坑
Ccc67ol的博客
12-15 1789
基于react的登录页面校验失败实现表单清空。
antd中的form表单用法笔记
Fs670267542的博客
11-26 5293
这是我的表单结构,引用的antd中的Form表单,里面有四个From.Item (这里的Row,Col可以忽略,因为我包个外层结构好布局样式) 我的需求 1.在此处点击添加是需要收集到这个skuId ,以这个skuId为参数去调用接口,去匹配拿到到一组数据,展示到下面的表格中. 收集某个From.Item中的数据用到的方法getFieldsValue, 拿值怎么拿,需要把From定义成一个可控组件,也就是给它加一个ref,通过标签获取它上面的值,看代码 这两步就可以给标签添加一个...
antd form表单验证validateFields 采坑记录
zhuangjiajia09的专栏
05-25 4007
使用form表单时，如果需要仅仅在前端对输入内容进行验证，可使用rules <a-form-item label="姓名" v-bind="formItemLayout"> <a-input class="required" placeholder="请输入" v-decorator="[ 'name', { rules: [
Ant Design Vue 中遇到的坑（二） `Form.Item` cannot generate `validateStatus` and `help` automatically...
陈乾的博客
01-12 1万+
一、发生场景 在使用Ant Design 时，进入页面打开控制台发现有红色的警告： ‘Form.Item’ cannot generate ‘validateStatus’ and ‘help’ automatically, while there are more than one ‘getFieldDecorator’ in it. 二、原因 经过查找发现在同一个form-item中使用v-for循环遍历生成了多个input框，并且每个都加上了v-decorator作为数组，但实际每一个from-i
AntDesign表单Form实例方法（useForm/ref）
情非得已小猿猿
08-30 8421
1、获取表单实例 函数式组件: const AppletModal: React.FC<any> = (props) => { const [form] = Form.useForm(); } class类组件: import { FormInstance } from 'antd/lib/form'; class AppletEdit extends React.Component<any, any> { form: any = React.cr.
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、付费专栏及课程。

余额充值