React antd使用踩坑总结2
提示：初级react，记录工作中问题，积累经验，如有问题请多赐教！
1、处理Ant Design 3.24.3版本Popover在父元素fixed的情况下跟随滚动条改变位置的问题
背景：
1.导航栏fixed到顶部
2.悬浮出现popover气泡卡片，但气泡卡片随着滚动条滚动改变位置
解决方案：
在popover上使用 getPopupContainer={triggerNode => triggerNode.parentNode}2、处理antd table其中某一项的值如果超出，使用....显示：
{
title: 'config_content',
key: 'Content',
onCell: () => {
return
{
style: {
maxWidth: 600,
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
cursor: 'pointer'
}
}
},3、Antd Table无法选择&多选问题，根据antd table 可选择案例，发现点击任意元素都会变成全选，或者取消全选，无法单个选择
原因dataSource 里面没有key属性，需要给Table 添加 rowKey="id"
4、Ant table表格选中后点击下一页上一页选中的内容丢失
只需要在 Table 标签的 rowSelection 属性对象内输入
preserveSelectedRowKeys: true ， 即可
let rowSelection = { preserveSelectedRowKeys: true, };
5、antd 中的TextArea样式以及固定高度设置
固定高度使用： row={5}
6、antd select的模糊搜索以及多选
7、antd的form 的input输入框怎么限制不能输入空格
AntDesign中的Form表单其实提供了非常丰富的校验方式，有两种方式解决input不能输入空格的问题（具体看自己的需求）
{getFieldDecorator('name', {
rules: [
{
required: true,
message: '请输入名字',
},
// 方式一：正则匹配（提示错误，这种会在提交表单时给提示，阻止表单提交）
{ pattern: /^[^\s]*$/, message: '禁止输入空格',}
],
// 方式二：粗暴点不允许输入空格(其实是将e.tartget.value转成控件自己的值)
// 这个方法的用途非常强大，还可以结合upload做一些文件上传之后的回调处理
getValueFromEvent: (event) => {
return event.target.value.replace(/\s+/g,"")
},
})
()}