【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.pswp.cn/news/162132.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/162132.shtml
英文地址,請注明出處:http://en.pswp.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引擎轉換為數據庫可執行的…