前言

這是做的一個多模塊切換的一個案例，也是第一會這樣大量的使用表單，大概有7，8個模塊，這里用其中的一個模塊來做展示

以下三張圖片對應的就是三個模塊了

• 這是第一個展示面
• 這是第二個編輯頁
  
• 這是呈現數據的頁面
  

實現過程

1、每一個模塊就是一個組件

<script>// 這里定義一個默認值，作為第一個顯示的模塊state={cls='tj'} </script> <div className="module1"><div className=`module1_1 ${cls}`>第一個添加模塊（當calss名為tj的時候顯示）</div><div className=`module1_2 ${cls}`>第一個編輯模塊（當calss名為bj的時候顯示）</div><div className=`module1_3 ${cls}`>第一個展示模塊（當calss名為zs的時候顯示）</div> </div>

2、先把所有3個模塊全部隱藏，再利用一個動態class名實現模塊的切換

/* 樣式文件 需要用另一個class名限制一下，不然3個組件的切換就會失效*/ .module1{div {display: none;}.module1_1 {&.tj{display: block;}}.module1_2 {&.bj{display: block;}}.module1_3 {&.zs{display: block;}} }

總結

1、大量的數據提交，修改，重置，數據的深拷貝和數據還原是關鍵，可以提煉
2、一個功能就是一個事件，復用起來很方便，不要為一次的省事而作疊加。
3、input 框 value和defaultValue 屬性不可以一起使用，會發生沖突
4、獲取值一般都是value ， 多選框需要通過checked
5、多個模塊的狀態控制（互不關聯）,一般情況下是這么設置的
{
module1:false,
module2:false,
module3:false,
}
如果把每一個模塊都寫成單獨的組件，直接用一個狀態就可以了

總結

以上是生活随笔為你收集整理的react实现页面多个模块的切换的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。