react-es6-利用解构对象copy修改单个对象后合并到原始对象内（antd原框架常用）

es6关于解构赋值这里我就不多说，不熟悉的可以自行搜索

这里直接列出常用的代码按照这种方式上项目即可

const onFinish = fieldsValue => {//提交按钮
            //格式化时间-析构moment对象
            const rangeValue = fieldsValue['zhiTimer'];
       
            const values = {
                ...fieldsValue,
                'zhiTimer': [rangeValue[0].format('h:mm:ss'), rangeValue[1].format('h:mm:ss')],
            };
            console.log('Success:', values);//这里直接打印values即可获取格式化并合并到原对象内后的对象
          };

//...

const onFinishFailed = errorInfo => { console.log('Failed:', errorInfo); };

说明：filedsValue是一个带有各种键值对的对象

当需要过滤或处理其中一个对象时，比如包含的键为zhiTimer的值进行时间格式化

新建一个对象结构

...fieldsValue,添加处理过滤的键值对
新创建的对象就是我们合并后需要用的对象如例子values

 还有个最常用的方式是引入组件和组件内某个子组件：

例如：

import {Form,Select} from 'antd'
const {Option} = Select

<Select placeholder="请选择节目">
{
                             JiemuObj.map((item)=>{
                               return (<Option key={item.value} value={item.value}>
                                    {item.name}
                                </Option>)
                            })
                         }
</Select>

Select 组件内包含Option 子组件  直接使用Select 和Option会出错，必须要把Option解构赋值出来 既 const { Option } = Select 这种用法一般比较常见，特别是再antd内各个包含类似父子关系的组件

 

另外还有种用法：

  <Form.Item
        wrapperCol={{
          span: 12,
          offset: 6,
        }}
      >
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>


类似上面的设置：

const layout = {

    labelCol: { span: 6 },

    wrapperCol: { span: 12 },

};

<Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 6 }}>
                        <Button type="primary" htmlType="submit">
                                提交
                            </Button>
                    </Form.Item>

直接解构并点出具体键值对