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 错误记录