Ant Design 采坑记录

表格中的 key 属性

问题截图

antd 示例截图

在使用表格的排序和筛选功能时，发现一个奇怪的问题。如果我同时使用排序和筛选，排序竟然不能正常使用了，排查了很久，也没找到，再看官方提供的案例，发现也没什么差别。因为我习惯使用 JSX 风格来写表格，官方案例用的是非 JSX 风格的写法，最后在同事的帮助下，尝试给 Column 加了 key 属性，竟然神奇的解决的这个怪异的问题。

虽然官方文档里说，如果已经设置了唯一的 dataIndex，可以忽略 key 属性，但是最好还是同时添加 key 和 dataIndex 属性，避免一些不必要的问题。

解决方法：为表格 Column 添加 key 属性

解决问题截图

多选框的滚动加载实现

当选择框中数据较多时，一次加载所有数据可能会不太合适，就可能需要分页获取来加载所有数据。但是Antd 的选择框未提供这样的方法来实现滚动加载，只有一个下拉列表滚动事件，在查阅 issues 列表时发现有同样的需求，并且找到了一个可行的解决方案：https://github.com/ant-design/ant-design/issues/12406#issuecomment-424968753

loadMoreData = event => {
  event.persist();
  const { scrollTop, offsetHeight, scrollHeight } = event.target;

  // 如果滚动到底且列表已加载数据小于所有数据长度时，发送请求获取下一页数据
  if (target.scrollTop + target.offsetHeight === target.scrollHeight && currentCount < totalCount) {
    // scrollToEnd, do something!!!
  }
};

多个选择框过滤已选数据及重名验证

在使用选择框时，需要将已选择的值进行过滤，下个选择框只显示剩下的值，碰到了一些棘手的问题，下面简单总结下（下图是大致场景效果，可根据描述自行脑补）：

场景效果截图

因为Option选项显示的内容与value内容不一致（value值要发送给后端），导致过滤已选内容后，选中项变为value值，而期望是选中项就是选择的Option内容。建议碰到这种Option内容与value不一致时，设置antd中提供的labelInValue属性，然后按照antd要求的格式{key: string, label: ReactNode}进行组装数据，再发送给后端，也避免了上面的选中项异常问题。

问题解决截图

筛选数据的实现：选择框变化时的处理，利用lodash的omit方法筛选数据，注意在setTimeout中获取已选值，因为此处ant的getFieldValue拿到的上次的值（可能此法不太好，等有时间研究下再换个方案）

筛选数据

重名验证：重名验证逻辑不麻烦，

判断下选择的值是否在已选值中即可，但是问题在提示错误后，再去删除或修改上一个别名时，发现错误还在，这时需要在这些时机强制验证一下所有的别名重名错误：

重名验证

Upload 组件

Uploader

与`Form`的`getFieldDecorator`一起使用时碰到的坑

使用上传组件，自然免不了与Form组件一起使用，但使用Upload不像其他表单组件，还需要一些特殊处理。getValueFromEvent（把 onChange 的参数（如 event）转化为控件的值），这里主要是对getFieldsValue获取到的数据做一些处理，如下：

const normFile = ({ fileList }) =>
  fileList.map(({ uid, response }) => ({ uid, url: response && response.data && response.data.imageUrl }));

beforeUpload 返回 false，文件仍然为上传成功的问题

beforeUpload方法返回false并不能阻止文件上传，但是可以用返回Promise，用里面的reject(file)来阻止

const beforeUpload = file => {
  // 注意此处通过返回 Promise，可以阻止图片上传
  // 参考：https://github.com/ant-design/ant-design/issues/8020#issuecomment-377906779
  return new Promise((resolve, reject) => {
    const isJpg = file.type === 'image/jpeg';
    const isPng = file.type === 'image/png';
    const isGif = file.type === 'image/gif';

    if (!(isJpg || isPng || isGif)) {
      message.error('仅支持上传JPG、PNG、GIF类型的图片!');
      reject(file);
    }

    resolve(file);
  });
};

shuangmianxiaoQ / study-note