AntDesign表單的理解與使用

基本介紹

• 雖然 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="請輸入數字" />)}
複製代碼

• 以上則是全文的介紹內容，若有問題歡迎留言。

做者：前端小黑 連接：https://juejin.im/post/5d63c252f265da03aa257b8c 來源：掘金 著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。