AntDesign错误记录与常⽤例⼦
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={() => ElementById('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必须被调⽤,if... 中间不允许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中是不是有错误，⽐如我在数字输⼊框⾥⾯使⽤了字符串长度的判断就会有错，但是不错暴露出来让你看到ant design
rules: [
{
message: '请输⼊数量!',
whitespace: true,
type: 'number',
validator: (rule, value, callback) => {
if (value === null || im().length === 0) { // 错误
callback('请输⼊数量!');
}
callback();
},
},
],
这⾥我对数字使⽤了trim()⽅法会报错，所以要⽤JSON.stringify()包裹起来
2：数字输⼊框限制⼩数点，负数
<InputNumber
parser={value => {
place(/[.-]/g, '');
}}
/>
N： roadhog配置
1.配置项⽬内部的绝对路径
在.webpackrc.js中配置如下:    '@': `${__dirname}/src`：此时的@指向src 。但是在开发环境中似乎不⾏
alias: {
components: solve(__dirname, 'src/components/'),
'@': `${__dirname}/src`,
},

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。