AntDesign表單的理解與使用

前端小黑發表於2019-08-27

基本介紹

  • 雖然 react 沒有內建的表單驗證邏輯，但是我們可以使用 react 元件庫 AntDesign 中的表單元件 Form 來實現這一需求。

  • 具體地， AntDesign 中的表單元件 Form 與表單域 Form.Item（用於包裹任意輸入控制的容器）配合使用：

    • 在 Form.Item 中設定校驗規則，在表單提交或表單輸入變化時，通過執行 this.props.form.validateFields() 來實現表單值的校驗。
    • 在 Form.Item 中放置一個被 getFieldDecorator 註冊的表單控制元件（子元素）來實現表單控制元件與表單的雙向繫結，實現表單值的收集。

  • 使用 Form 自帶的自動收集資料和校驗功能的關鍵是需要使用 Form.create() 包裝元件（傳送門?AntDesign 官方文件）。

  • Form.create() 是一個高階函式，通過傳入一個 react 元件，返回一個新的具有註冊、收集、校驗功能的 react 元件。使用方式如下：

class CustomizedForm extends React.Component {}
CustomizedForm = Form.create({})(CustomizedForm);
export default CustomizedForm;
複製程式碼
  • 經 Form.create() 包裝過的元件會自帶 this.props.form 屬性，該屬性提供了許多 API 來處理資料，如上面介紹的 getFieldDecorator 方法 則是用於和表單進行雙向繫結。元件一旦經過 getFieldDecorator 的修飾，那麼該元件的值將完全由 Form 接管。
  • 我們知道，元件的更新有兩種方式：1. 父元件更新；2. 自身狀態發生改變。
  • 使用 Form.create() 包裝元件的目的就是為了使用第一種方式更新被包裝元件：
    • 一旦被 getFieldDecorator 修飾過的元件觸發onChange事件，便會觸發這個父元件的的更新(forceUpdate)，從而促使被包裝元件的更新。
    • 上面提到的 Form.create({})(CustomizedForm), CustomizedForm就是我們所說的被包裝元件。
  • 下面將介紹 this.props.form 屬性提供的幾種 API 和使用方法，其他 API 可具體檢視文件（傳送門?AntDesign 官方文件）。

this.props.form 屬性提供的 API

getFieldDecorator

  • getFieldDecorator 方法的目的是為了把需要收集的資料在例項中進行註冊，並把註冊的值同步到被 getFieldDecorator 修飾的表單控制元件上，所以該控制元件不能再通過 value 或 defaultValue 賦值，它的狀態將全部由 getFieldDecorator 託管，預設值設定可以用 getFieldDecorator 裡的 initialValue。 使用方式如下：
// 語法：getFieldDecorator(id, options)
<Form.Item {...layout} label="題目" extra={titleExtra}>
    {getFieldDecorator('name', {
        rules: [
            { required: true, message: '記得填寫題目' },
            { whitespace: true, message: '記得填寫題目' },
        ],
        initialValue: name, // 預設值設定
    })(<Input allowClear={true}/>)}
</Form.Item>
複製程式碼

getFieldValue

  • getFieldValue 方法的作用是獲取一個輸入控制元件的值。使用方法如下：
let options = this.props.form.getFieldValue('name'); // 使用getFieldDecorator方法修飾的id為'name'的表單控制元件
複製程式碼

setFieldsValue

  • setFieldsValue方法用於動態設定一組輸入控制元件的值（⚠️注意：不要在 componentWillReceiveProps 內使用，否則會導致死迴圈）。使用方法如下：
 // 設定使用getFieldDecorator方法修飾的id為'name'的表單控制元件的值
this.props.form.setFieldsValue({ name: undefined });
複製程式碼

validateFields

  • validateFields方法用於校驗並獲取一組輸入域的值與錯誤，使用方法如下(若 fieldNames 引數為空，則校驗全部元件)：
/*
    型別：
    (
      [fieldNames: string[]],
      [options: object],
      callback(errors, values)
    ) => void
*/
const { form: { validateFields } } = this.props;

validateFields((errors, values) => {
  // ...
});

validateFields(['field1', 'field2'], (errors, values) => {
  // ...
});

validateFields(['field1', 'field2'], options, (errors, values) => {
  // ...
});

// 通過 validateFields 方法驗證表單是否完成填寫，通過便提交新增操作。
handleOk = () => {
  const { dispatch, form: { validateFields } } = this.props;

  validateFields((err, values) => {
    if (!err) {
      dispatch({
        type: 'cards/addOne',
        payload: values,
      });
      // 重置 `visible` 屬性為 false 以關閉對話方塊
      this.setState({ visible: false });
    }
  });
}
複製程式碼

格式限制驗證

  • AntDesign 中表單的功能很多，其中，表單輸入格式驗證是通過設定 getFieldDecorator(id, options) 方法中傳入的校驗規則引數 options.rules 來實現，下面就為大家整理了一下 AntDesign 中常用的幾種表單輸入格式驗證。

輸入框不能為空限制

  • 例項程式碼：
{getFieldDecorator('name', {
  rules: [{
    required: true,
    message: '名稱不能為空',
  }],
})(<Input placeholder="請輸入名稱" />)}
複製程式碼

輸入框字元限制

  • 字元長度範圍限制：
{getFieldDecorator('password', {
  rules: [{
    required: true,
    message: '密碼不能為空',
  }, {
    min:4,
    message: '密碼不能少於4個字元',
  }, {
    max:6,
    message: '密碼不能大於6個字元',
  }],
})(<Input placeholder="請輸入密碼" type="password"/>)}
複製程式碼
  • 字元長度限制：
{getFieldDecorator('nickname', {
  rules: [{
    required: true,
    message: '暱稱不能為空',
  }, {
    len: 4,
    message: '長度需4個字元',
  }],
})(<Input placeholder="請輸入暱稱" />)}
複製程式碼

自定義校驗

  • validator屬性自定義效驗，必須返回一個callback：
{getFieldDecorator('passwordcomfire', {
  rules: [{
    required: true,
    message: '請再次輸入密碼',
  }, {
    validator: passwordValidator
  }],
})(<Input placeholder="請輸入密碼" type="password"/>)}
   
//  密碼驗證
const passwordValidator = (rule, value, callback) => {
  const { getFieldValue } = form;
  if (value && value !== getFieldValue('password')) {
    callback('兩次輸入不一致！')
  }

  // 必須總是返回一個 callback，否則 validateFields 無法響應
  callback();
}
複製程式碼

whitespace空格報錯

  • 若輸入只有一個空格，則會報錯：
{getFieldDecorator('nickname', {
  rules: [{
    whitespace: true,
    message: '不能輸入空格',
  } ],
})(<Input placeholder="請輸入暱稱" />)}
複製程式碼

pattern正則驗證

  • 如果輸入的不是數字，則提示錯誤：
{getFieldDecorator('age', {
  rules: [{
    message:'只能輸入數字',
    pattern: /^[0-9]+$/
  }],
})(<Input placeholder="請輸入數字" />)}
複製程式碼
  • 以上則是全文的介紹內容，如有問題歡迎留言。

相關文章