antd 踩坑

1. tree table rowSelection

树形表格 在树形的数据每层前面都会有CheckBox，但是需要需要里层的CheckBox隐藏，可以这么做
.tsx

  const rowSelection: TableRowSelection<any> = {
    onChange: (selectedRowKeys, selectedRows) => {
      setSelectedRows(selectedRows);
    },
    getCheckboxProps: record => ({
      disabled: !record.use,
      className: !record.use && styles.tableSelectCheckboxHide
    })
  };

.less

.tableSelectCheckboxHide {
  display: none;
}

但是我们点击全选的时候，被隐藏的里层CheckBox的key还是会被放到selectedRowKeys里，怎么解决这个问题

  const rowSelection: TableRowSelection<any> = {
    onChange: (selectedRowKeys, selectedRows) => {
      setSelectedRows(selectedRows);
    },
    getCheckboxProps: record => ({
      disabled: !record.use, // 里层的CheckBox设置为disabled就不会被选中
      className: !record.use && styles.tableSelectCheckboxHide // 控制里层checkbox不显示
    })
  };

table rowSelection 支持指定某一行的 checkbox 是否是 disabled

2. table 超出长度用省略号

RestText.tsx

import React from "react";
import { Tooltip } from "antd";

import styles from "./index.module.less";

interface IProps {
  text: string;
  maxWidth?: number | string; // 设置为 15 或者 26vw
}

const RestText = ({ text, maxWidth }: IProps) => {
  return (
    <Tooltip title={text}>
      <span className={styles.wrapper} style={{ maxWidth }}>
        {text}
      </span>
    </Tooltip>
  );
};

export default RestText;

index.module.less

.wrapper {
  width: 100%;
  word-break: break-all;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

3. antd v4 Form.Item 嵌套多个组件

v3 用getFieldDecoretor绑定指定的组件是没问题的，但是v4 是将value跟onChange绑定在Form.Item里的最外层的组件的，如果用Fragment的方式<></>就会报错了。所以推荐使用Item嵌套，且在里面加上noStyle属性

<Form.Item label="demo">
  <div>
    I am render props
    <Form.Item name="demo" noStyle>
      <Input placeholder="render props" />
    </Form.Item>
  </div>
</Form.Item>

4.0 Form.Item chilren 添加其他元素异常

5. Dropdown嵌套在Card中，item的onClick不被触发

  const handleDelete = (e: MouseEvent<HTMLElement>) => {
    e.preventDefault();
    e.stopPropagation();
    return showDeleteConfirm({ onOk: removeKnowledge });
  };

  const items: MenuProps['items'] = [
    {
      key: '1',
      label: (
        <Space>
          删除
          <DeleteOutlined onClick={handleDelete} />
        </Space>
      ),
    },
  ];

点击删除，handleDelete不会被触发，而handleCardClick被触发，怎么解决？

办法：如图，在Dropdown的onClick阻止冒泡

6. antd@5.12.7 即使上传jpg图片，fileList[0].thumbUrl参数也会被转为png格式的base64字符串

        <Form.Item<FieldType>
          label={"xxx"}
          name="avatar"
          valuePropName="fileList"
          getValueFromEvent={normFile}
        >
          <Upload
            listType="picture-circle"
            maxCount={1}
            accept="image/*"
            beforeUpload={(file, fileList) => {
              console.info(file, fileList);
              return false;
            }}
            showUploadList={{ showPreviewIcon: false, showRemoveIcon: false }}
          >
            <button style={{ border: 0, background: 'none' }} type="button">
              <PlusOutlined />
              <div style={{ marginTop: 8 }}>Upload</div>
            </button>
          </Upload>
        </Form.Item>

有待探源

7. antd 切换tab保留form的数据

如图在Map下有Username输入框，切换到Transit，再切换回Map，想仍然保留Username输入框的数据，antd@4.4.0提供了preserve属性来保存所有数据，即使被隐藏了。

详细代码见demo

8. antd@5.12.7 给动态表单初始值

AntDesign: InitialValues on Dynamic Form

9. antd@5.12.7 不支持多个文件单次上传

设置 multiple={true} 一次选择多个文件，这个时候会触发多次onChange，也会多次触发beforeUpload，从而多次调用接口，我想通过接口一次性把我选择的多个文件都上传了。如果业务是在点击button时进行上传，而不是onChange时上传，直接让其受控就可以了，搜索issue，
upload的beforeUpload在一次拖拽多张或者点击上传多张会触发多次, 是不是触发一次比较合理,或者在beforeupload之前设置一个钩子每次操作触发一次 #16355
Upload component - enable sending multiple files in one XHR request #8579
结论：antd@5.12.7 不支持多个文件单次上传
目前项目中让其在onChange单文件上传