小而美的 React Form 組件

来源:http://www.cnblogs.com/guoxiaoming/archive/2017/09/09/7499173.html
-Advertisement-
Play Games

背景 之間在一篇介紹過 Table 組件《 React 實現一個漂亮的 Table 》 的文章中講到過，在企業級後臺產品中，用的最多且複雜的組件主要包括 Table、Form、Chart，在處理 Table 的時候我們遇到了很多問題。今天我們這篇文章主要是分享一下 Form 組件，在業務開發中， 相 ...


背景

之間在一篇介紹過 Table 組件《 React 實現一個漂亮的 Table 》 的文章中講到過，在企業級後臺產品中，用的最多且複雜的組件主要包括 Table、Form、Chart，在處理 Table 的時候我們遇到了很多問題。今天我們這篇文章主要是分享一下 Form 組件，在業務開發中， 相對 Table 來說，Form 處理起來更麻煩，不是所有表單都像註冊頁面那樣簡單，它往往需要處理非常多的邏輯，比如：

  • 需要處理數據驗證邏輯。
  • 在一個項目中的很少有可以復用的表單，每個表單的邏輯都需要單獨處理。
  • 在表單中往往存在需要自定義的組件，比如：Toggle、Tree、Picker 等等。

Form 作為一個功能型組件，它需要解決的問題無非就是兩個：

  • 把一個數據對象扔給它，它能夠在讓 Form 內的交互型組件獲取到數據並展示出來，同時這些組件上的數據也能反過來讓 Form 組件獲取到。
  • 對數據的有效性進行驗證。

在 React 項目開發中沒有用過其他 Form 相關的組件，但是這裡我又忍不住想和 Ant Design 的 Form 對比一下，以下是我在 antd 官網上的一個截圖：

antd form

大家可以通過以上圖片看到，我想輸入自己的中文名字都不能正常輸入，這裡主要存在兩個問題：

  • onChange 被觸發了多次，在一次中文未完整的輸入前，不應該觸發 onChange 事件。
  • 另外，中文在文本框內就不能正常顯示。

我在想這兩個問題不在組件上處理，在哪裡處理的呢？訪問地址: https://ant.design/components/form-cn/ 可以試一下，也希望他們可以解決掉這個問題。這個問題應該怎麼解決，我之前做過記錄: [React 中, 在 Controlled(受控制)的文本框中輸入中文 onChange 會觸發多次]( https://github.com/hypers/blog/blob/master/source/_posts/react-issue.md#react-中-在-controlled 受控制的文本框中輸入中文-onchange-會觸發多次)。

我們在設計的時候自然是解決了這些問題，預覽效果: https://rsuitejs.com/form-lib/ ，接下來看一下具體的設計。

設計

針對前面提到 Form 需要解決的兩個問題（數據校驗和數據獲取），在設計的時候，我們把這個兩個問題作為兩個功能，獨立在不同的庫處理。

  • form-lib 處理表單數據初始化，數據獲取。
  • rsuite-schema 定義數據模型，做數據有效性驗證。

這兩個庫可以獨立使用，如果你有自己一套自己的 Form 組件，只是缺少一個數據驗證的工具，那你可以單獨把 rsuite-schema 拿過來使用。

Form 定義一個表單

分別看一下它們是怎麼工作的，form-lib 用起來比較簡單，提供了兩個組件：

  • <Form> 處理整個表單服務的邏輯
  • <Field> 處理表單中各個交互型組件的邏輯，比如 input,select。

看一個示例：

安裝

首先需要安裝 form-lib

npm i form-lib --save

示例代碼

import { Form, Field, createFormControl } from 'form-lib';
const SelectField = createFormControl('select');

const user = {
  name:'root',
  status:1
};


<Form data={user}>
  <Field name="name"   />
  <Field name="status" accepter={SelectField} >
    <option value={1}>啟用</option>
    <option value={0}>禁用</option>
  </Field>
</Form>

在預設情況下 Field 是一個文本輸入組件，如果你需要使用 HTML 表單中其他的標簽，你可以像上面示例一樣 通過 createFormControl(標簽名稱) 方法創建一個組件， 在把這個組件通過 accepter 屬性賦給Field 組件，這樣你就能像操作原生 HTML 一樣設置 Field。 通過這種方式，後面在功能介紹的時候會講到怎麼把自定義組件放在 Field 中。

自定義佈局

這裡存在一個疑問，<Field> 必須放在 <Form> 下麵第一層嗎？ 如果對佈局沒有要求，設計成這樣是處理起來最方便的，因為在 <Form> 中可以直接通過 props.children 獲取到所有的 <Field>，想怎麼處理都可以。 剛開始我們是這樣的，後來在實際應用中發現，表單的佈局是有很多種，如果要設計成這樣，那肯定就帶來一個問題，不好自定義佈局。 所以這裡 <Form> 與 <Field> 之間的通信我們用的是 React 的 context。 這樣的話你就可以任意佈局:

<Form data={user}>
  <div className="row">
    <Field name="name"   />
  </div>
  <div className="row">
    <Field name="status" accepter={SelectField} >
      <option value={1}>啟用</option>
      <option value={0}>禁用</option>
    </Field>
  </div>
</Form>

Schema 定義一個數據模型

安裝

npm i rsuite-schema --save

在 rsuite-schema 主要有兩個對象

  • SchemaModel 用於定義數據模型。
  • Type 用於定義數據類型，包括：
    • StringType
    • NumbserType
    • ArrayType
    • DateType
    • ObjectType
    • BooleanType

這裡的 Type 有點像 React 中 PropTypes 的定義。

示例代碼

一個示例:

const userModel = SchemaModel(
    username: StringType().isRequired('用戶名不能為空'),
    email: StringType().isEmail('請輸入正確的郵箱'),
    age: NumberType('年齡應該是一個數字').range(18, 30, '年應該在 18 到 30 歲')
});

這裡定義了一個 userModel, 包含 username、email、age 3 個欄位， userModel 擁有了一個 check 方法, 當把數據扔進去後會返回驗證結果：

const checkResult = userModel.check({
    username: 'foobar',
    email: '[email protected]',
    age: 40
})

// checkResult 結果:
/**
  {
      username: { hasError: false },
      email: { hasError: false },
      age: { hasError: true, errorMessage: '年應該在 18 到 30 歲' }
  }
**/

多重驗證

StringType()
  .minLength(6,'不能少於 6 個字元')
  .maxLength(30,'不能大於 30 個字元')
  .isRequired('該欄位不能為空');

自定義驗證

通過 addRule 函數自定義一個規則。 如果是對一個字元串類型的數據進行驗證，可以通過 pattern 方法設置一個正則表達式進行自定義驗證。

const myModel = SchemaModel({
    field1: StringType().addRule((value) => {
        return /^[1-9][0-9]{3}\s?[a-zA-Z]{2}$/.test(value);
    }, '請輸入合法字元'),
    field2: StringType().pattern(/^[1-9][0-9]{3}\s?[a-zA-Z]{2}$/, '請輸入合法字元')
});

自定義動態錯誤信息

例如，要通過值的不同情況，返回不同的錯誤信息，參考以下

const myModel = SchemaModel({
    field1: StringType().addRule((value) => {
        if(value==='root'){
          return {
            hasError: true,
            errorMessage:'不能是關鍵字 root'
          }
        }else if(!/^[a-zA-Z]+$/.test(value)){
          return {
            hasError: true,
            errorMessage:'只能是英文字元'
          }
        }

        return {
            hasError: false
        }
    })
});

複雜結構數據驗證

const userModel = SchemaModel({
  username:StringType().isEmail('正確的郵箱地址').isRequired('該欄位不能為空'),
  tag: ArrayType().of(StringType().rangeLength(6, 30, '字元個數只能在 6 - 30 之間')),
  profile: ObjectType().shape({
    email: StringType().isEmail('應該是一個 email'),
    age: NumberType().min(18, '年齡應該大於 18 歲')
  })
})

更多設置，可以查看 rsuite-schema API 文檔

Form 與 Schema 的結合

const userModel = SchemaModel({
    username: StringType().isRequired('用戶名不能為空'),
    email: StringType().isEmail('請輸入正確的郵箱'),
    age: NumberType('年齡應該是一個數字').range(18, 30, '年應該在 18 到 30 歲')
});

<Form model={userModel}>
  <Field name="username" />
  <Field name="email" />
  <Field name="age" />
</Form>

把定義的的SchemaModel對象賦給，<Form>的 model 屬性，就把它們綁定起來了，<Field> 的 name 對應 SchemaModel 對象中的 key。

以上的示例代碼是不完整的，沒有處理錯誤信息和獲取數據，只是為了方便大家理解。完整的示例，可以參考接下來的實踐與解決方案。

實踐與解決方案

一個完整的示例

import React from 'react';
import { Form, Field, createFormControl } from 'form-lib';
import { SchemaModel, StringType } from 'rsuite-schema';

const TextareaField = createFormControl('textarea');
const SelectField = createFormControl('select');

const model = SchemaModel({
  name: StringType().isEmail('請輸入正確的郵箱')
});

class DefaultForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      values: {
        name: 'abc',
        status: 0
      },
      errors: {}
    };
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleSubmit() {
    const { values } = this.state;
    if (!this.form.check()) {
      console.error('數據格式有錯誤');
      return;
    }
    console.log(values, '提交數據');
  }
  render() {
    const { errors, values } = this.state;
    return (
      <div>
        <Form
          ref={ref => this.form = ref}
          onChange={(values) => {
            console.log(values);
            this.setState({ values });
            // 清除表單所有的錯誤信息
            this.form.cleanErrors();
          }}
          onCheck={(errors) => {
            this.setState({ errors });
          }}
          values={values}
          model={model}
        >
          <div className="form-group">
            <label>郵箱: </label>
            <Field name="name" className="form-control" />
            <span className="help-block error" style={{ color: '#ff0000' }}>
              {errors.name}
            </span>
          </div>

          <div className="form-group">
            <label>狀態: </label>
            <Field name="status" className="form-control" accepter={SelectField} >
              <option value={1}>啟用</option>
              <option value={0}>禁用</option>
            </Field>
          </div>

          <div className="form-group">
            <label>描述 </label>
            <Field name="description" className="form-control" accepter={TextareaField} />
          </div>
          <button onClick={this.handleSubmit}> 提交 </button>
        </Form>
      </div>
    );
  }
}

export default DefaultForm;

在 rsuite 中的應用

在 rsuite 提供了很多 Form 相關的組件，比如 FormGroup,FormControl,ControlLabel,HelpBlock 等等， 我們通過一個例子看一下怎麼結合使用。

通過上一個例子中我們可以看到，沒有個 Field 中有很多公共部分，所以我們可以自定義一個無狀態組件 CustomField,把 ControlLabel,Field,HelpBlock 這些表單元素都放在一起。


import React from 'react';
import { Form, Field, createFormControl } from 'form-lib';
import { SchemaModel, StringType, ArrayType } from 'rsuite-schema';
import {
  FormControl,
  Button,
  FormGroup,
  ControlLabel,
  HelpBlock,
  CheckboxGroup,
  Checkbox
} from 'rsuite';

const model = SchemaModel({
  name: StringType().isEmail('請輸入正確的郵箱'),
  skills: ArrayType().minLength(1, '至少應該會一個技能')
});

const CustomField = ({ name, label, accepter, error, ...props }) => (
  <FormGroup className={error ? 'has-error' : ''}>
    <ControlLabel>{label} </ControlLabel>
    <Field name={name} accepter={accepter} {...props} />
    <HelpBlock className={error ? 'error' : ''}>{error}</HelpBlock>
  </FormGroup>
);

class DefaultForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      values: {
        name: 'abc',
        skills: [2, 3],
        gender: 0,
        status: 0
      },
      errors: {}
    };
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit() {
    const { values } = this.state;
    if (!this.form.check()) {
      console.error('數據格式有錯誤');
      return;
    }
    console.log(values, '提交數據');
  }

  render() {
    const { errors, values } = this.state;
    return (
      <div>
        <Form
          ref={ref => this.form = ref}
          onChange={(values) => {
            this.setState({ values });
            console.log(values);
          }}
          onCheck={errors => this.setState({ errors })}
          defaultValues={values}
          model={model} >

          <CustomField
            name="name"
            label="郵箱"
            accepter={FormControl}
            error={errors.name}
          />

          <CustomField
            name="status"
            label="狀態"
            accepter={FormControl}
            error={errors.status}
            componentClass="select"
          >
            <option value={1}>啟用</option>
            <option value={0}>禁用</option>
          </CustomField>

          <CustomField
            name="skills"
            label="技能"
            accepter={CheckboxGroup}
            error={errors.skills}
          >
            <Checkbox value={1}>Node.js</Checkbox>
            <Checkbox value={2}>Javascript</Checkbox>
            <Checkbox value={3}>CSS 3</Checkbox>
          </CustomField>

          <CustomField
            name="gender"
            label="性別"
            accepter={RadioGroup}
            error={errors.gender}
          >
            <Radio value={0}>男</Radio>
            <Radio value={1}>女</Radio>
            <Radio value={2}>未知</Radio>
          </CustomField>

          <CustomField
            name="bio"
            label="簡介"
            accepter={FormControl}
            componentClass="textarea"
            error={errors.bio}
          />
          <Button shape="primary" onClick={this.handleSubmit}> 提交 </Button>
        </Form>
      </div>
    );
  }
}
export default DefaultForm;

自定義 Field

如果一個組件不是原生表單控制項，也不是 RSuite 庫中提供的基礎組件，要在 form-lib 中使用，應該怎麼處理呢？ 只需要在寫組件的時候實現以下對應的 API:

  • value : 受控時候設置的值
  • defalutValue: 預設值，非受控情況先設置的值
  • onChange: 組件數據發生改變的回調函數
  • onBlur: 在失去焦點的回調函數(可選)

接下來我們使用 rsuite-selectpicker 作為示例, 在 rsuite-selectpicker 內部已經實現了這些 API。

import React from 'react';
import { SchemaModel, NumberType } from 'rsuite-schema';
import { Button, FormGroup, ControlLabel, HelpBlock } from 'rsuite';
import Selectpicker from 'rsuite-selectpicker';
import { Form, Field } from 'form-lib';

const model = SchemaModel({
  skill: NumberType().isRequired('該欄位不能為空')
});

const CustomField = ({ name, label, accepter, error, ...props }) => (
  <FormGroup className={error ? 'has-error' : ''}>
    <ControlLabel>{label} </ControlLabel>
    <Field name={name} accepter={accepter} {...props} />
    <HelpBlock className={error ? 'error' : ''}>{error}</HelpBlock>
  </FormGroup>
);

class CustomFieldForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      values: {
        skill: 3,
      },
      errors: {}
    };
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleSubmit() {
    const { values } = this.state;
    if (!this.form.check()) {
      console.error('數據格式有錯誤');
      return;
    }
    console.log(values, '提交數據');
  }
  render() {
    const { errors, values } = this.state;
    return (
      <div>
        <Form
          ref={ref => this.form = ref}
          onChange={(values) => {
            this.setState({ values });
            console.log(values);
          }}
          onCheck={errors => this.setState({ errors })}
          defaultValues={values}
          model={model}
        >


          <CustomField
            name="skill"
            label="技能"
            accepter={Selectpicker}
            error={errors.skill}
            data={[
              { label: 'Node.js', value: 1 },
              { label: 'CSS3', value: 2 },
              { label: 'Javascript', value: 3 },
              { label: 'HTML5', value: 4 }
            ]}
          />
          <Button shape="primary" onClick={this.handleSubmit}> 提交 </Button>
        </Form>
      </div>
    );
  }
}

export default CustomFieldForm;

更多示例：參考

如果你在使用中存在任何問題，可以提交 issues，如果你有什麼好的想法歡迎你 pull request，GitHub 地址：


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

-Advertisement-
Play Games
更多相關文章
  • AngularJS的簡單實用
    Angular Js 的初步認識和使用 一: 1.模塊化 定義模塊和控制器 ng-app="myapp" controller="myctrl" 指定模型 ng-model="" 獲取的屬性值: ng-bind="屬性名"或者{{屬性名}} 2.初始化模塊(在Script中進行) var myapp ...
  • 高頻Dom操作,頁面性能優化（學習）
    1.1 DOM操作對頁面的影響 通過js操作DOM的代價很高，影響頁面性能的主要問題有如下幾點： 訪問和修改DOM元素 修改DOM元素的樣式，導致重繪或重排 通過對DOM元素的事件處理，完成與用戶的交互功能 訪問和修改DOM元素 修改DOM元素的樣式，導致重繪或重排 通過對DOM元素的事件處理，完成 ...
  • 【前端】強大的javascript原生選擇器querySelector 和 querySelectorAll
    querySelector 和 querySelectorAll 在傳統的 JavaScript 開發中，查找 DOM 往往是開發人員遇到的第一個頭疼的問題，原生的 JavaScript 所提供的 DOM 選擇方法並不多，僅僅局限於通過 tag, name, id 等方式來查找，這顯然是遠遠不夠的， ...
  • 瀏覽器對象練習（慕課網題目）
    編程練習 製作一個跳轉提示頁面： 要求： 1. 如果打開該頁面後，如果不做任何操作則5秒後自動跳轉到一個新的地址，如慕課網主頁。 2. 如果點擊“返回”按鈕則返回前一個頁面。 效果: 註意: 在視窗中運行該程式時，該視窗一定要有歷史瀏覽記錄，否則"返回"無效果。 我的解答 <!DOCTYPE htm ...
  • JS獲取字元對應的ASCII碼
    有時候會需要用到字元的ASCII碼，一時之間調試時可能會忘記字元與ASCII碼對應的數字。 最近喜歡用瀏覽器控制台直接跑JS代碼，將這個代碼直接貼到瀏覽器控制台，即可調試（谷歌瀏覽器快捷鍵 ctrl+shift+j） function GetAsciiCode(){ var str = prompt ...
  • 原生js 幻燈片+自動播放 代碼
    1 1 /* 2 CSS重置 3 * */ 4 5 body, 6 ul, 7 ol { 8 margin: 0px; 9 padding: 0px; 10 } 11 12 #flash { 13 width: 600px; 14 height: 300px; 15 margin: 100px;..... ...
  • [js高手之路]深入淺出webpack教程系列2-配置文件webpack.config.js詳解(上)
    接著上文，重新在webpack文件夾下麵新建一個項目文件夾demo2，然後用npm init --yes初始化項目的package.json配置文件，然後安裝webpack( npm install [email protected] --save-dev )，然後創建基本的項目文件夾結構，好了，我們的又一 ...
  • [js高手之路]深入淺出webpack教程系列1-安裝與基本打包用法和命令參數
    webpack，我想大家應該都知道或者聽過，Webpack是前端一個工具,可以讓各個模塊進行載入,預處理,再進行打包。現代的前端開發很多環境都依賴webpack構建，比如vue官方就推薦使用webpack.廢話不多說，我們趕緊開始吧. 第一步、安裝webpack 新建文件夾webpack->再在we ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類