ant design的使用记录

1,437 阅读4分钟

3.x

Table

  • 每一条数据的key的问题;
    1. 每一条数据加上key的属性(要相互不同);
    2. table加rowKey={record => record.studentId};
  • column的dataIndex(对应数据的字段)是必须的设置的key,dataIndex可以忽略;

datePicker

  • 使用field进行赋值的时候,必须是moment对象;
  • 默认情况使用和有初始值的情况下得到的value的格式不同,一个为moment的对象形式,一个为字符串的时间格式;
new Date(value).getTime(); // 获取时间戳
moment(value).valueOf(); // (不用区分时间类型获取时间戳)

input

  • input获取文本框的值使用e.target.value;
  • Input.TextArea 调整为不可以伸缩的使用style={{ resize: none }};
  • 长度使用正则限制会将多个空格计算入长度,使用maxLength属性,只会计入一个长度;
  • input输入后的内容有换行操作的话会作为字符串的一部分获取到,使用pre标签渲染会原样展示(注意滚动条的样式,注意代码的空格解析,会解析所用空格);

Form

  • 默认情况下提交时获得的err和values都是当前显示的表单项的内容,而且切换步骤之后原来表单项的值也没有了。每一个表单项的getFieldDecorator加上preserve属性之后就可以获取所有渲染过的表单项(比如刚进入页面没有渲染过第二步的表单此时在第一步提交的时候不会有第二步表单的值,如果已经进入过第二步又回到了第一步,此时在第一步表单提交时会有第二步表单的信息)的值,而且切换步骤之后原来表单项的值依然会保留;
{getFieldDecorator('age', {
  rules: [
    { required: true, message: '请填写年龄' },
  ],
  preserve: true,
})(<InputNumber min={1} max={100} />)}
  • 当使用setFieldsValue赋值时其中有某个属性(比如id)是没有使用getFieldDecorator注册的表单项时会有此警告信息(You cannot set a form field before rendering a field associated with the value);
  • 多个表单项不能使用同一个getFieldDecorator值,会有冲突;
  • 表单项没有显示的话不会得到表单项的值(&& || 判断的渲染);
  • 自定义校验的规则使用debounce的时候要注意,要使用debounce后的函数,因为每一次都会生成一个新的函数;
  • 表单的自定义校验,无论是否要callback 错误信息最后都要callback(),否则最后提交不能正常校验;
testPhone = (rule, value, callback) => {
  const form = this.props.form;
  if (value && !(/^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/.test(value))) {
    callback('请正确填写电话号码');
  } else {
    callback();
  }
}

<Form.Item label="phone">
  {getFieldDecorator('phone', {
    rules: [
      { required: true, message: '请填写手机号' },
      { validator: this.testPhone }, // 自定义校验规则
    ],
  })(<Input placeholder="请填写手机号" />)}
</Form.Item>

Anchor

  • 可以响应滚动高度而高亮对应的目录,可以设置偏移高度(比如最上面有固定的导航,所以滚动的位置要有一定的偏移,保证内容出现在视口中),其中href值要使用英文或数字的形式,不建议使用汉字形式(可能导致滚动时不响应导航的高亮);

grid

  • 有一些响应式的断点,在不同的分辨率下使用不同的span的值,实现响应式;
<Col xs={2} sm={4} md={6} lg={8}>col</Col>

spin

  • spin组件的spinning默认值为true,当值为Null,'',0,false,NaN是理解为false,但是值为undefined时理解为true;

Dialog

  • Dialog的didMount的触发和dialog的显示无关,只要组件挂载就会触发与是否显示无关。可以使用visible && 来实现didMount与显示同步;
  • 显示图片 设置此属性 width="auto" centered destroyOnClose自适应图片高度;

Tab

  • 初始渲染只会运行页面中存在的组件的DidMount,第一次切换会触发后面渲染的组件的DidMount,之后再切换就不会在有DidMount的触发;
  • 记住历史的Tab可以在url上的search储存内容,或者使用路由渲染Tab页面,在Tab页面判断url的路由参数类来确定activeKey,渲染页面;
  • 可以使用属性控制销毁组件,或者使用visible && com的形式控制显示;

浮层的移位问题

  • 父元素加position: relative; 当前元素 popupContainer = {d => d.parentNode} // 也可以是父元素的id标签 ;
  • 可以添加popupProps来控制弹层的属性 { align: '' }等参数;

4.x

Table

  • Table表格在flex布局下面固定表头后,宽度不会自适应屏幕,浏览器缩放会影响Table的宽度。需要在Table的外层容器上加上 min-width: 0;

Tooltip

  • 当ToolTip包裹disabled的按钮时无法触发气泡的显示,可以使用一个普通html标签包裹disabled的按钮。