Ant Design 錯誤記錄與常用例子

Ant Design 錯誤記錄

 

一： 標簽頁Tabs 

1：設置activeKey或defaultActiveKey，綁定默認值不起作用： =>    需要同時設置activeKey和defaultActiveKey。

 

二： 表格Table 

1：當改變表格綁定的值，表單部分組件未刷新：  =>    可以在刷新列表前將綁定的值重置為空。 還不行的話可以給table加上rowKey屬性（值為 string|Function(record):string）

rowKey={(record) => record.id}

2：表格有多選功能的時候，selectedRowKeys會保存所有行的key，而selectedRows只會保存當前頁選中行（翻頁后會丟失數據）。

三： Select下拉框

1: 可動態搜索，獲取數據時，option渲染有問題   ： =>   需要配置  filterOption={false}

 

 

四：Select/Dropdown/DatePicker/TimePicker的條件隨着頁面滾動條移動

<div id='box'>
   <RangePicker
        showTime={{
        hideDisabledOptions: true,
        defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
        }}
        format="YYYY-MM-DD HH:mm:ss"
        getCalendarContainer={() => document.getElementById('box')}
   />
</div>

　或者這種方式

 <Select getPopupContainer={triggerNode => triggerNode.parentNode}>
        <Select.Option value="">全部</Select.Option>
 </Select>

　　

五：路由相關

 1、replace 和 push： 

場景1： 頁面A --(push())--> 頁面B --(replace())--> 頁面C

場景2： 頁面A --(push())--> 頁面B --(push())--> 頁面C

replace：替換當前路由，如果在頁面C點擊瀏覽器的返回鍵，會返回到頁面A。因為頁面C的路由替換了頁面B。 

push：顯示新路由，將老路由記錄在歷史中。如果在頁面C點擊瀏覽器的返回鍵，會返回到頁面B。

 

五：表單相關

 1、自定義校驗validator：

官網中描述，自定義校驗（注意，callback 必須被調用）。callback必須被調用,if... else...中間不允許return出來

例子：

validator: (rule, value, callback) => {
     if (value && !/^[0-9a-zA-Z]*$/g.test(value)) {
            callback('請輸入正確格式的賬號名！');
     } else if (!value) {
             callback('請輸入賬號名!');
     }
     callback();
},

如果我們使用了數字輸入框，輸入數字后，還是會報錯，比如： ，你需要再rules中定義此校驗為數字類型

rules: [{ type: 'number'}]

　　

當我們將頁面數據填完后，都符合要求，但是就是無法執行到validateFieldsAndScroll里，這時候我們需要查看自定義validator中是不是有錯誤，比如我在數字輸入框里面使用了字符串長度的判斷就會有錯，但是不錯暴露出來讓你看到

rules: [
          {
            message: '請輸入數量!',
            whitespace: true,
            type: 'number',
            validator: (rule, value, callback) => {
              if (value === null || value.trim().length === 0) { // 錯誤
                            callback('請輸入數量!');
              }
              callback();
            },
            },
 ],

這里我對數字使用了trim()方法會報錯，所以要用JSON.stringify()包裹起來

 

2：數字輸入框限制小數點，負數

<InputNumber
      parser={value => {
           return value.replace(/[.-]/g, '');
      }}
 />

　　

 

 

N： roadhog配置

1.配置項目內部的絕對路徑

在.webpackrc.js中配置如下:    '@': `${__dirname}/src`：此時的@指向src 。但是在開發環境中似乎不行

  alias: {
    components: path.resolve(__dirname, 'src/components/'),
    '@': `${__dirname}/src`,
  },