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>

直接解構並點出具體鍵值對