Ant Design 踩坑记录

[ly2011]

转自：chenxiaochun/blog#55

1、Checkbox的value必须为字符串

如下所示，当你想给这组Checkbox设置默认值时，CheckboxGroup上的value必须为['1', '2']，而不能是[1, 2]，否则会不起作用。

<CheckboxGroup value={['1', '2']}>
  <Checkbox value='1'>1</Checkbox>
  <Checkbox value='2'>2</Checkbox>
  <Checkbox value='3'>3</Checkbox>
  <Checkbox value='4'>4</Checkbox>
</CheckboxGroup>

2、validateFieldsAndScroll方法

当表单的高度超过一屏之后，建议使用此方法去校验表单，当某个表单元素验证不通过时，页面会自动滚动到有错误提示的对应元素上。

3、设置 table 的 column width

有效的用法1：

{
  key: 'skuName',
  title: '商品名称',
  dataIndex: 'skuName',
  width: 300,
}

有效的用法2：

{
  key: 'skuName',
  title: '商品名称',
  dataIndex: 'skuName',
  width: '300px',
}

无效的用法：

{
  key: 'skuName',
  title: '商品名称',
  dataIndex: 'skuName',
  width: '300',
}

区别就是，如果宽度为字符串类型，必须加上单位。

4、使用async-validator验证数字

默认如果仅仅像下面这样写，是怎么也验证不通过的：

rules: [
  {
    required: true,
    type: 'number',
    message: '请填写正确的商品编号',
  },
],

你必须使用 antd form 中的transform属性将它转换一下才可以，如下所示🙄

rules: [
  {
    required: true,
    type: 'number',
    message: '请填写正确的商品编号',
    transform: value => +value,
  },
],

5、一个关于 TreeSelect 组件显示下拉框的一个内部方法，具体使用方式可以查看：#54