碎片化学习（踩坑）笔记

1、antd——table的使用

需求描述：react中获取后端返回数组的index编号作为table里的序号

需要在Table的属性columns中写：

 {
 title: '序号',
 dataIndex: 'index',
 render: (text, record, index) => index + 1,
 }

2、使用getFieldDecorator时报错getFieldDecorator is not defined：

页面报错：ReferenceError: getFieldDecorator is not defined

明明应该使用了Form.create()(组件名称)，为什么还是没有呢，查看代码发现，没有解构，直接在代码中使用了getFieldDecorator，应该提前解构:
const{form:{getFieldDecorator}}=this.props就不会报错了。

3、给react组件设置多个className

<Button  className={`${styles.btn} ${styles.btn_g}`} type="primary">描述</Button>

使用ES6新增的模版字符串是最简单的方法，不用还引入别的模块
⚠️ 属性名之间不能有，；之类的，否则只是别最后一个属性名

4、Antd 中表单输入框labelCol和wrapperCol中 { xs: 24, sm: 8}是什么意思

对labelCol和wrapperCol的设置就是对上面这两部分占页面大小的设置
在响应式布局中，xs、sm、md、lg、xl、xxl 这几个值是表示分辨率区间，使用时表明在此分辨率范围下，内容所占用的栅格数。
响应尺寸：xs：超小号 sm:小号 md：中号 lg：大号 xl：超大号 xxl：最大号

const formItemLayout = {
    labelCol: {//label占比 当屏幕为xs最小像素时占满一行；当屏幕为sm大于最小像素时占两列
      xs: 24,
      sm: 2
    },
    wrapperCol: {//input框占比 当屏幕为xs最小像素时占满一行；当屏幕为sm大于最小像素时占十列
      xs: 24,
      sm: 10
    }
  }
//labelCol和wrapperCol中不独占一行情况下，对应之和要小于24

labelCol和wrapperCol中不独占一行情况下，对应之和要小于24

5、select组件中placeholder为什么不显示

不显示情况一：
单独使用select组件：

 <Select defaultValue="" placeholder="请选择" />

原因及解决方案：
defaultValue优先级高于placeholder
去除defaultValue=""配置项，即使此配置项为空。
不显示情况二：

<FormItem label="xxxxx" >
    {getFieldDecorator("abc", {
        initialValue: '',
        rules: [{ required: true, message: '请选择xxxx' }],
      })(
          <Select placeholder="请选择xxxx" onChange={this.handleChange}>
           {data.map(({ name, source_type, valueToMap }) => <Option value={valueToMap} key={source_type}>{name}</Option>)}
          </Select>
                            )}
</FormItem>

原因及解决方法：
结合Form表单使用时候，select组件会把 ’ ’ 当做有值而没有显示placeholder，必须设置为undefined或者null。（ initialValue: undefined, //或者null）
注意，此时select中设置defaultValue无效，因为Form.Item 子组件的 defaultValue 参数都要被 getFieldDecorator 中的 initialValue 替换