【Antd】antd的Form表单项用Form.Item包裹后,表单校验不生效的原因及解决办法

以下代码是用<Form></Form>包裹的子组件中的render部分的代码:

可以看到Input.TextArea<div>包裹住了,这会导致无法被Form表单识别并抓取,因为Form默认只允许放一个子元素。

<div className={styles.textAreaWrap}><Form.Item name={formItemOpts.formItemName} noStyle rules={formItemOpts.rules}><div style={{ marginTop: 8 }}><Input.TextArea ref={cRef} {...rest} style={{ paddingBottom: 24, ...rest?.style }} /></div></Form.Item>
</div>

这时候我们应该增加一个noStyle属性给Form.Item标签,并且移动divForm.Item标签之外,noStyle的效果就是可以忽略Form.Item的样式,起到和内部放置div一样的效果,可以认为noStyle=<></>

<div className={styles.textAreaWrap}><div style={{ marginTop: 8 }}><Form.Item name={formItemOpts.formItemName} noStyle rules={formItemOpts.rules}><Input.TextArea ref={cRef} {...rest} style={{ paddingBottom: 24, ...rest?.style }} /></Form.Item></div>
</div>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/162132.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

算法的奥秘:常见的六种算法(算法导论笔记2)

算法的奥秘&#xff1a;种类、特性及应用详解&#xff08;算法导论笔记1&#xff09; 上期总结算法的种类和大致介绍&#xff0c;这一期主要讲常见的六种算法详解以及演示。 排序算法&#xff1a; 排序算法是一类用于对一组数据元素进行排序的算法。根据不同的排序方式和时间复…

postman定义公共函数这样写,测试组长直呼牛逼!!!

postman定义公共函数 在postman中&#xff0c;如下面的代码&#xff1a; 1、返回元素是否与预期值一致 var assertEqual(name,actual,expected)>{tests[${name}&#xff1a;实际结果&#xff1a; ${actual} &#xff0c; 期望结果&#xff1a;${expected}]actualexpected…

2023年危险化学品经营单位主要负责人证模拟考试题库及危险化学品经营单位主要负责人理论考试试题

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2023年危险化学品经营单位主要负责人证模拟考试题库及危险化学品经营单位主要负责人理论考试试题是由安全生产模拟考试一点通提供&#xff0c;危险化学品经营单位主要负责人证模拟考试题库是根据危险化学品经营单位主…

Exception:Zero date value prohibited

运行了很久的系统&#xff0c;突然不能访问&#xff0c;报错如下&#xff1a; Error attempting to get column updated_time from result set. Cause: java.sql.SQLException: Zero date value prohibited; SQL []; Zero date value prohibited; nested exception is java.…

【追求卓越12】算法--堆排序

引导 前面几节&#xff0c;我们介绍了有关树的数据结构&#xff0c;我们继续来介绍一种树结构——堆。堆的应用场景有很多&#xff0c;比如从大量数据中找出top n的数据&#xff1b;根据优先级处理网络请求&#xff1b;这些情景都可以使用堆数据结构来实现。 什么是堆&#xf…

【20年扬大真题】编写程序,功能是计算1~10之间的偶数之和

【20年扬大真题】 编写程序&#xff0c;功能是计算1~10之间的偶数之和 #include<stdio.h> int main() {int i 1;int sum 0;for (i 1;i < 10;i){if (i % 2 0){sum i;}}printf("%d", sum); }

Java核心知识点整理大全9-笔记

目录 null文章浏览阅读9w次&#xff0c;点赞7次&#xff0c;收藏7次。Java核心知识点整理大全https://blog.csdn.net/lzy302810/article/details/132202699?spm1001.2014.3001.5501 Java核心知识点整理大全2-笔记_希斯奎的博客-CSDN博客 Java核心知识点整理大全3-笔记_希斯…

FindMy技术用于充电宝

充电宝是一种便捷的充电器&#xff0c;方便个人随身携带&#xff0c;能够自行储备电能&#xff0c;为主流电子设备提供充电服务。它广泛应用于没有外部电源供应的场所&#xff0c;例如旅行、户外活动或紧急情况下&#xff0c;为用户的手持设备提供持续的电力支持&#xff0c;确…

spring boot加mybatis puls实现,在新增/修改时,对某些字段进行处理,使用的@TableField()或者AOP @Before

1.先说场景&#xff0c;在对mysql数据库表数据插入或者更新时都得记录时间和用户id 传统实现有点繁琐&#xff0c;这里还可以封装一下公共方法。 2.解决方法&#xff1a; 2.1&#xff1a;使用aop切面编程&#xff08;记录一下&#xff0c;有时间再攻克&#xff09;。 2.1.1&am…

读书笔记:彼得·德鲁克《认识管理》第30章 管理沟通

一、章节内容概述 我们知道&#xff0c;组织中的沟通是感知&#xff0c;也是期望&#xff0c;会产生要求&#xff0c;并且与信息不同&#xff0c;二者是对立的却相互依赖。 我们知道&#xff0c;下行沟通没有效果&#xff0c;只有上行沟通才能达到目的&#xff0c;并且 我们还…

软件工程第十二周

软件作坊、软件危机、软件过程控制、重型控制、敏捷、DevOps 这些术语概括了软件开发历史和实践中的几个重要概念和阶段。让我们逐一解析它们&#xff1a; 软件作坊&#xff08;Software Craftsmanship&#xff09;&#xff1a;这是软件开发的早期模式&#xff0c;强调个人技能…

【面试题】for...in 和 for...of 的区别

给大家推荐一个实用面试题库 1、前端面试题库 &#xff08;面试必备&#xff09; 推荐&#xff1a;★★★★★ 地址&#xff1a;web前端面试题库 JavaScript 是一门强大而灵活的编程语言&#xff0c;提供了多种迭代对象的方式。两个常见的迭代方式是 for...in 和…

Boost获取当前时间并格式化为字符串

格式化为字符串 时间转字符串有两种方法 #include <boost/date_time/posix_time/posix_time.hpp> #include <iostream>std::string getCurrentTime() {boost::posix_time::ptime currentTime boost::posix_time::microsec_clock::local_time(); std::string …

centos 安装k8s教程(一键安装k8s)

第一步 准备几台机器 第二步 K8s Manager 服务器中添加docker支持 安装教程请查看这个博客 docker 安装详细教程 点我 第三步安装 KuboardSpray 教程在这里 第四步 下载k8s资源包 第五步 安装k8s 点击安装后 显示如下&#xff1a;等待完成

arduino入门一:点亮第一个led

void setup() { pinMode(12, OUTPUT);//12引脚设置为输出模式 } void loop() { digitalWrite(12, HIGH);//设置12引脚为高电平 delay(1000);//延迟1000毫秒&#xff08;1秒&#xff09; digitalWrite(12, LOW);//设置12引脚为低电平 delay(1000); }

电脑桌面便签工具选择哪一款?

随着互联网时代的不断发展&#xff0c;电脑成为日常工作及办公中必不可少的工具&#xff0c;通过电脑这款工具&#xff0c;大家可以更好的进行工作、学习等方面的交流&#xff1b;电脑桌面便签由于可以为大家整合一些工作及学习方面的备忘事项及笔记等&#xff0c;因而深受大家…

获取验证码在倒计时未完成前清除验证码

场景&#xff1a; 在点击获取验证码后&#xff0c;验证码开始倒计时&#xff0c;在点击登录后&#xff0c;出现弹窗不跳转页面。因此在出现弹窗后&#xff0c;即使倒计时没有结束&#xff0c;也要将倒计时的文字变为重新获取验证码。 template代码 <div class"form-b…

【Vue】Node.js的下载安装与配置

目录 一.下载安装 官网&#xff1a; 二.环境变量的配置 三.设置全局路径和缓存路径 四.配置淘宝镜像 五.查看配置 六.使用npm安装cnpm ​ 一.下载安装 官网&#xff1a; https://nodejs.org/en/download 下载完之后&#xff0c;安装的时候一直点next即可&#xff0c…

FlinkCDC实现主数据与各业务系统数据的一致性(瀚高、TIDB)

文章末尾附有flinkcdc对应瀚高数据库flink-cdc-connector代码下载地址 1、业务需求 目前项目有主数据系统和N个业务系统,为保障“一数一源”,各业务系统表涉及到主数据系统的字段都需用主数据系统表中的字段进行实时覆盖,这里以某个业务系统的一张表举例说明:业务系统表Ta…

BQL是什么如何使用?

BQL是什么如何使用&#xff1f; BQL来源于Business Query Language &#xff0c;是一种业务查询语言。是北京硕迪制信科技有限公司根据以往统计分析案例研发的一种语言。特点是通过可视化界面对业务语言进行查询、聚合、排序等操作&#xff0c;通过BQL引擎转换为数据库可执行的…