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

  },