antd快速開發（Form篇）

来源:https://www.cnblogs.com/zhuanzhuanfe/archive/2019/10/18/11696994.html
-Advertisement-
Play Games

antd快速開發（Form篇） 前言 由於一直在做中台業務，後臺項目特別多，但是後臺項目的特點是：大量的列表和大量表單，重覆開發會降低效率，所以我這邊總結了一下使用 組件搭建 的快捷方法。希望能對大家有用。 傳統Form搭建 首先傳統搭建一個form表單，那麼代碼可能會是下麵這樣子 目前只有兩個表單 ...


antd快速開發（Form篇）

前言

由於一直在做中台業務，後臺項目特別多，但是後臺項目的特點是：大量的列表和大量表單，重覆開發會降低效率，所以我這邊總結了一下使用antd組件搭建form的快捷方法。希望能對大家有用。

傳統Form搭建

首先傳統搭建一個form表單，那麼代碼可能會是下麵這樣子

import React from 'react';
import { Form, Input } from 'antd';

@Form.create()
class MyTestForm extends React.Component {
  render() {
    const { form: { getFieldDecorator } } = this.props;
    return(
      <Form>
        <Form.Item label='姓名'>
          {
            getFieldDecorator('username', {
              rules: [
                {
                  required: true,
                  message: '這是必填項'
                }
              ]
            })(<Input placeholder="placeholder" />)
          }
        </Form.Item>
        <Form.Item label='密碼'>
          {
            getFieldDecorator('password', {
              rules: [
                {
                  required: true,
                  message: '這是必填項'
                }
              ]
            })(<Input placeholder="placeholder" />)
          }
        </Form.Item>
      </Form>
    )
  }
}

export default MyTestForm;

目前只有兩個表單項，看起來代碼還挺清晰的，假如這個表單是很複雜的表單，有多個表單項，這塊的代碼會很長，維護和開發起來都是不方便，最重要的再來一個大的表單，你還是會需要寫這麼多的代碼。這樣就影響了開效率。

優化後的Form

我們想要的是，儘量少寫（不寫）重覆性的代碼，讓代碼的復用性更高。我這塊做了一些優化，主要的流程如圖：

主要的幾個點：

  • 將最底層，最重要的部分抽離出來，也就是BaseItem組件，BaseItem具備的能力是form的能力，雙向綁定的能力等，純凈的組件，不包含任何UI層面的東西。
  • UI層的東西也單獨抽離出來，以方便以後UI層面的拓展。（例如想自己設計一套UI樣式，就只用直接新開發一套UI層面的東西，而不用但心原子層組件的代碼）。
  • 每個表單的信息抽離成配置文件，使頁面維護起來更方便。

具體的代碼如下

//BaseItem.js（原子層）
const BaseItem = (props) => {
  const { form: { getFieldDecorator }, config } = props;
  const { name, children, ...argv } = config;
  return name ? getFieldDecorator(name, { ...argv })(children) : (children);
}

export default BaseItem;
//ItemLayout.js（UI組件）
import React from 'react';
import { Form } from 'antd';

//Layout也可以用自己的UI組件
const Layout = ({ config: { itemOptions }, children }) =>
  <Form.Item { ...itemOptions } >{ children }</Form.Item>

const hidden = (isHidden) => {
  const type = typeof(isHidden);
  return (type === 'function' && isHidden()) || type === undefined || isHidden; 
    //預設是顯示
}

class ItemLayout extends React.Component {
  render() {
    const { children } = this.props;
    return(
      <>
        {
          React.Children.map(
            children, (child, i) => {
              const { config: { isHidden, ...argv}} = child.props;
              return hidden(isHidden) ? null : //具有隱藏表單項能力
                  React.cloneElement(
                    <Layout { ...argv }>{ child }</Layout>,
                    {
                      ...children.props
                    }
                  )
            }
          )
        }
      </>
    )
  }
}

export default ItemLayout;
//config.js（配置文件）
import React from 'react';
import { Input } from 'antd';

export const formConfig = () => {
  return [
    {
      itemOptions : { //Form.Item的api配置
        label: '姓名'
        //...argv
      },
      name: 'username',
      initialValue: '',
      rules: [],
      children: <Input />
      //...argv
    },
    {
      itemOptions : {
        label: '密碼'
      },
      name: 'password',
      initialValue: '',
      rules: [],
      children: <Input />,
      isHidden: true //隱藏此項 預設是顯示
    },
    {
      itemOptions : {
        label: '密碼'
      },
      name: 'password',
      initialValue: '',
      rules: [],
      children: <Input />,
      isHidden: () =>  false //通過方法來動態顯示隱藏
    },
  ]
}

支持antd Form 所有的api。

配置文件為什麼是使用函數的形式？因為可以通過函數的參數，實現配置文件和頁面之間進行數據的傳遞。

在頁面就這樣使用，代碼如下

import React from 'react';
import { Form, Input } from 'antd';
import { formConfig } from './config.js';
import BaseItem from './BaseItem';
import ItemLayout from './ItemLayout';

@Form.create()
class MyTestForm extends React.Component {
  render() {
    const { form } = this.props;
    return(
      <Form>
        {
          formConfig().map((item, i) => 
             <ItemLayout><BaseItem key={i} config={item} form={form}/></ItemLayout>)
        }
      </Form>
    )
  }
}

export default MyTestForm;

相比傳統搭建Form是不是快捷了很多，而且頁面代碼層面更顯得更清晰。

註意：

假如是想使用自定義的組件，（一個個性化的業務組件），簡單點，我對Input的封裝

//自動trim的Input
import { Component } from 'react';
import { Input } from 'antd';

class TrimInput extends Component {
  handleChange = (e) => {
    e.target.value = e.target.value.trim();
    this.props.onChange(e.target.value); //Input Chang 後將值傳遞給props
  }

  render() {
    const { value, ...argv } = this.props;
    return(
      <Input
        value={ value } //將props的填在Input中
        { ...argv }
        onChange={this.handleChange}/>
    )
  }
}

export default TrimInput;

自定義的業務組件需要具備雙向數據流的能力，最重要的一點是在更新的時候需要 調用this.props.onChange(data)。

搜索Form包裝（SearchForm）

假如覺得這還不夠過癮，那麼一起來基於BaseItem來再包裝業務組件吧。相信每個後臺都有搜索能力吧，那麼我們就包裝一個搜索的SearchForm。

主要就是增加一個search功能並把form的值傳遞出去。

主要代碼如下：

//searchForm.js
import React from 'react';
import { Form, Button } from 'antd';

import BaseItem from './BaseItem';
import ItemLayout from './ItemLayout';

@Form.create()
class SearchForm extends React.Component {

  handleSearch = () => {
    const { form: { validateFields }, search } = this.props;
    validateFields((err, fieldsValue) => {
      console.log(fieldsValue);
      if(!err) {
        search && search(fieldsValue);
      }
    })
  }

  render() {
    const { form, searchConfig, search, form: { resetFields } } = this.props;
    return(
      <>
        <Form onSubmit={this.handleSearch}>
          {
            searchConfig().map((item, i) => 
               <ItemLayout><BaseItem key={i} config={item} form={form}/></ItemLayout>)
          }
          {
            search && <div>
              <Button htmlType="submit" type="primary" style={{marginRight: '20px'}}>
                  搜索
              </Button>
              <Button onClick={() => resetFields()}>重置</Button>
            </div>
          }
        </Form>
      </>
    )
  }
}

export default SearchForm;

頁面裡面使用，表單項還是抽成配置文件使用：

//config.js 查詢條件
export const searchConfig = () => {
  return [
    {
      itemOptions : {
        label: '條件一'
      },
      name: 'name1',
      initialValue: '',
      rules: [],
      children: <Input />
    },
    {
      itemOptions : {
        label: '條件二'
      },
      name: 'name2',
      initialValue: '',
      rules: [],
      children: <Input />
    }
  ]
}
import React from 'react';
import { searchConfig } from './config';
import SearchForm from './SearchForm';

class MyTestForm extends React.Component {
  handleSearch = value => {
    console.log(value);//獲取到的查詢條件
  }
  render() {
    return(
      <SearchForm searchConfig={searchConfig} search={this.handleSearch} />
    )
  }
}

export default MyTestForm;

這樣子寫查詢表單是不是很快呀，以後遇到查詢就引用這個組件，然後抽一個配置文件，這樣就OK了。

還有也會經常遇到這種情況，彈窗裡面的Form，這樣子就需要給彈窗增加收集數據的能力。相當於我們把searchForm的組件放在 Modal 裡面。 具體實現代碼就不貼了。

antd Form 需要註意的幾個問題。

  1. initialValue 這個屬性只是設置表單的初始值，當需要動態更改表單的值的時候，使用 setFieldsValue

  2. resetFields這個屬性是重置一組輸入控制項的值與狀態，（將值重置為initialValue ， 而不是清空數據，需要清空數據還是使用setFieldsValue）

antd Form 新的改動

antd Form 將在第4個版本使用 rc-field-form, 但是還沒有發佈，我是在4.0-prepare分支上看到。

那麼兩個底層組件 有什麼區別呢？

首先rc-field-form 會儘量在api層面上保持一致，但是仍有地方做了改動。 主要是以下幾點：

  • 當沒有手動更新過表單的時候，將不會收集initialValues 的值

    在rc-form裡面，如果用戶沒有操作過表單，將會從form的initialValues 收集值。他們認為這是一個bug，但是好多用戶是用了這個，所以他們不做修複。在rc-field-form中，將不會有這個bug。如果想改變組件的值，使用 setFieldsValue 代替。

  • 嵌套的name使用數組代替字元串

    rc-form裡面支持user.name，最終會被解釋成為{user:{ name: '' } }

    rc-field-form將是['user', 'name'] 解釋成為 {user: { name: '' }} 並且會把 user.name解釋成為{ ['user.name']: ''}

  • 刪除validateFieldsAndScroll這個屬性

    是因為使用了findDomNode，但是findDomNode在StrictMode中被標記為警告。認為這是對錶單組件的過度控制。

  • getFieldsError 將總是返回來數組

    rc-form 當沒有錯的時候，返回的是null，rc-field-form現在返回的是一個空數組

  • 刪除了validateFields的callback函數

    是因為ES8支持async/await,沒有理由不使用它。我們使用的時候應該是

    async function() {
  try {
    const values = await form.validateFields();
    console.log(values);
  } catch (errorList) {
    errorList.forEach(({ name, errors }) => {
      // Do something...
    });
  }
}

  • setFields將不觸發onFieldsChange和setFieldsValue不觸發onValuesChange

    總結

寫這篇文章主要是自己做後臺最Form的總結，還有是為大家提供一種思路，後臺快速開發的方式。

後面還會更新其它antd 組件，主要是如何開發更適合業務場景的組件。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 瀏覽器相關原理(面試題)詳細總結二
    1. 瀏覽器渲染過程是怎樣的？ 按照渲染的時間順序，流水線可分為如下幾個子階段： 、`樣式計算 佈局階段 分層 柵格化 顯示`。 1. 渲染進程將 HTML 內容轉換為能夠讀懂DOM 樹結構。 2. 渲染引擎將 CSS 樣式表轉化為瀏覽器可以理解的styleSheets，計算出 DOM 節點的樣式。 ...
  • js修改頁面標題 title
    如果對你有幫助的話麻煩點個【推薦】~最好還可以follow一下我的GitHub~感謝觀看！ ...
  • vue 分組左右選擇
    <el-col :span="12"> <div style="text-align: left" class="transferdata"> <div class="right-main"> <div class="right-left-main"> <span style="font-weigh... ...
  • jQuery—獲取表單標簽的數據值
    獲取設置input值 獲取設置textarea標簽的值 ...
  • 新手學Html之JSP基礎語法——入門（二）
    JSP基礎語法 JSP註釋 comment.jsp 1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C// ...
  • JavaScript Basics_Fundamentals Part 2_A simple calendar
    下方的日曆框架是從 Active learning: A simple calendar 上整過來的。 主要任務是用 語句來讓日曆本顯示出每月相對應的天數，相關代碼已經給出，我們只需要補充 下欠缺的代碼即可。 點擊上方的「Reset」按鈕可以重置代碼，點擊「Show solution」按鈕可以顯示答 ...
  • 本人親測-百度富文本編輯器(無bug版本)
    再此我想說明一點，好多教程都是轉載別人的，而且也不註明從哪裡轉載的。每次搜點資料的時候總是跟網上刷小視頻的感覺一樣。有些人就直接把別人的東西粘貼過來了，一點改動都沒有。廢話不多說，直接上教程。（百度網盤下載鏈接：鏈接：https://pan.baidu.com/s/1ZmNWVm7DoMv5bZF1 ...
  • 新手學Html之JSP簡介——入門（一）
    1.JSP：動態網頁 靜態動態：是否隨著時間地點、用戶操作的改變而改變 動態網頁需要用到 服務端腳本語言（JSP） 2.架構 CS：Client Server 不足： a.如果軟體升級、那麼全部軟體都需要升級 b.維護麻煩：需要維護每一臺 客戶端軟體 BS：Broswer Server 客戶端可以通 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類