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`,
  },

Ant Design 错误记录与常用例子