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