Skip to content

Ant Design Skills&Tips

Jump to bottom
EricYang edited this page Apr 21, 2021 · 22 revisions

重点记录一些antd组件库使用时遇到的问题以及解决方法

Form组件

使用

  • labelCol: { span: 6 },大小;
  • wrapperCol: { span: 16 };

校验

  • const [form] = Form.useForm();此时会报错：Warning: Instance created by useForm is not connected to any Form element. Forget to pass form

  • prop?官方没给出合理的处理方式；

  • 有form属性，设为上面的{form}， 可以通过form.validateFields().then()去校验整个Form表单的字段；

  • scrollToFirstError：长表单校验自动滚动；

  • form.getFieldsValue();获取表单各项的值；

  • form.setFieldsValue();设置表单区域的值；

  • form.resetFields();重置表单的值；// 可能会导致bug，例如：menuItem中有个delete icon，点击该icon弹出modal+form，此时form中显示menuItem的值，关闭modal，再次点击delete icon，modal中的form变成了空。

  • <Form.Item> 设置rule进行单项校验：required、max、validateTrigger:['onChange', 'onBlur','onFocus']、validator:customFunc自定义校验方法；

  • 对于customFunc自定义校验方法：能接收到rule、value、callback，通过判断value，然后返回Promise.resolve()/Promise.reject('提示内容')；

Modal组件

使用

  • getContainer={Boolean | HTMLElement}：默认挂载到document.body；
  • forceRender：强制刷新；
  • destroyOnClose：关闭的时候销毁组件；
  • maskClosable={false}：点击蒙层是否关闭；

AutoComplete、Select组件

使用

  • getPopupContainer={(triggerNode) => triggerNode.parentNode}：挂载到DOM，防止options列表滑动；
  • dropdownRender：渲染自定义ReactNode；
  • onSelect={this.onSelect}
  • onSearch={this.onSearch}
  • dataSource：数据；
  • 阻止冒泡：Option的点击事件e中会抛出，e.stopPropagation();e.preventDefault();return false;三连看情况；

Upload

使用

  • customRequest={this.upload}：自定义上传方法；upload(option):option包含文件信息：option.file.type、option.file.name...可以进行文件校验；

Table

使用

  • scroll={{x: 1200,y: 500,scrollToFirstRowOnChange: true,}}：设置表格滚动；
  • pagination：分页：
  {
      size: 'small',
      total: data.total,
      showQuickJumper: true,
      defaultCurrent: 1,
      current: state.pageNow,
      pageSize: 50,
      showTotal: total => '每页50条 共${total}条',
      onChange: page => onPageSizeChange(page),
  }
  • locale：{{emptyText: }}：自定义空内容；
  • loading={{spinning: this.props.loading,tip: "加载中...",}}：加载loading；
  • columns：表格列配置：
  {
      title: 'columnName',
      dataIndex: 'columnData',
      key: 'column',
      align: 'right',
      width: 120,
      render: text => handleVal(text),// 处理文本
      sorter: (a, b) => a.columnData - b.columnData,// 排序
  }

Menu组件

使用

         <Menu
            onSelect={handleMenuClick} // 选中事件
            onClick={..} // 点击事件
            onOpenChange={onOpenChange} // submenu展开事件
            style={{ width: 255 }} // 宽
            // defaultOpenKeys={['sub1']} // 默认展开的submenu
            openKeys={selectedSubMenu} // 当前选中的submenu
            // defaultSelectedKeys={['key1']} // 默认选中的menuItem
            selectedKeys={selectedMenuItem} // 当前选中的menuItem
            mode="inline" // 展示形态
          >
            {renderSubMenu(menuList)} // 自定义方法去渲染
          </Menu>

Clone this wiki locally