Ant Design Skills&Tips

重点记录一些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();重置表单的值；

<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,// 排序 },