关于使用antd框架踩坑及解决方案整理

众所周知，antd是当下react项目中用的比较多的开源ui框架，比较方便，但是在使用过程中，往往不能满足实际的开发需求

我是初次使用antd，以下将罗列自己在项目中遇到的问题及解决方案，希望对大家在开发中遇到同样类似问题有所帮助

 

问题1:在form表单中，如果要遍历一个Object( { } )对象类型或者Array（[ ]）数组类型，通过setFieldsValue循环重置一组输入控件的值，这时遍历每个元素，所设置的key是个变量，ke要用方括号包裹，即[ ],demo如下：

let Array = [
       {
            code:'name',
            value:'张三'
       },
       {
            code:'birthday',
            value:'2000/01'
       }
]
Array.forEach((item:object | any,index:number)=>{    
    this.props.form.setFieldsValue({
         [item.code]:item.value ? item.value :undefined,
     })        

})

在这里需要提醒的是，一般输入框在没有值的时候会使用placeholder，当给输入框赋的值为空的时候，应该将值设置为undefined,

原因：

1. null： Null类型，代表“空值”，代表一个空对象指针，使用typeof运算得到 “object”，所以你可以认为它是一个特殊的对象值。
2. undefined： Undefined类型，当一个声明了一个变量未初始化时，得到的就是undefined。
3. 实际上，undefined值是派生自null值的，ECMAScript标准规定对二者进行相等性测试要返回true
4. 那到底什么时候是null,什么时候是undefined呢？null表示"没有对象"，即该处不应该有值。

 

问题2：antd中，table 中如果设置的列均为固定项，那么会出现重复渲染固定项，因为在antd中fixed会把对应的列进行重构新的dom, 导致设置固定的列会重复出现，解决办法是： 给固定列中间增加空列进行占位，如下，

let array = [
    {
        title: '姓名',
        dataIndex: 'name',
        width: 120,
        fixed: 'left',
    },
    {
        title: '',
        dataIndex: 'name',
    },
    {
        title: '操作',
        key: 'operation',
        fixed: 'right',
        width: 120,
    }
]

 

 

问题3：RangePicker等时间选择器中，设置值的话，也是用setFieldsValue，demo：

let time = ["2021.01.01 00:00:00","2021.02.01 23:59:59"]，如果想要把变量time的值重置给选择器，是需要用moment将时间转化，否则会出现invalid 的情况，解决方案如下：

{getFieldDecorator('beginTime')(
    <RangePicker
        ranges={{
            '今天': [moment(), moment()],
            '最近7天': [moment().subtract(6, 'days'), moment()],
            '本月': [moment().startOf('month'), moment()]
        }}
    />
)}

改变值的时候，如下操作即可：
this.props.form.setFieldsValue({
   beginTime: [moment(time.value[0]+ ' 00:00:00','YYYY-MM-DD HH:mm:ss'),moment(time.value[1]+' 23:59:59' ,'YYYY-MM-DD HH:mm:ss')] ,
})

问题4: 待续........