antd-pro下的form使用注意事項

好久沒有更新博客，因爲有了新的任務，我負責全部的頁面開發，有點心累。。。

正題開始：

antd-pro下的表單如果使用了getFieldDecorator函數對錶單項進賦值的話，那麼你是無法通過直接設置value來控制表單的值得，例如：

<Input placeholder="請輸入" value='XXX' />
// 此時賦值會失敗，並且控制檯會打印錯誤

解決方法：

1.在render或者mounted的時候直接操作props.values(不推薦)

render(){
    const {values}=this.props;
    values.name='XXX';
    
    return (
        .
        .
        .
        <FormItem label='名字'>
            {getFieldDecorator(form,settings,gatewayFormName,'gatewayIds',name)(
                <Input placeholder="請輸入" /> //此時XXX會成功賦值
            )}
        </FormItem>
    )
}

2.在antd中推薦使用form對象自帶的setFieldsValue(),form對象是綁定在props下的，所以可以這麼使用：

this.props.form.setFieldValue({
    name:'value'
})

-----------------------------------------------------------------------

在antd下同一個組件是無法使用兩個form表單的，因爲Form.create（）會自動將form對象綁定在this.prop下，所以在你的form提交中你會兩次用到this.props.form.validateFields()方法，但是其實是在操作同一個form對象，這是表單的字段，驗證以及重置都是同步的

解決辦法：

將其中的一個form抽取出來作爲一個單獨的組件，在後在新的組件中重新生成form對象(antd-pro下是@Form.create())。這塊我就不上代碼了，太多了，從公司內網一字一字碼太費勁了。記得如果兩個組件有共用的屬性，記得將其提升到model中或者上一層父元素的state中

--------------------------------------------------------------------------

antd-pro下選擇框如果爲多選的話必須給他一個空數組或者是一個有數據的數組作爲初始值。在antd-pro下默認的初始值是‘’，會導致程序無法運行。

const values={names:[]};

<FormItem label='名字'>
   {getFieldDecorator(form,settings,gatewayFormName,'names',values)(
        <Select style={{width:'100%'}} mode="multiple">
            <Select.Option value='1'>1</SelectOption>
        </Select>
   )}
</FormItem>

 

以上就是我最近在項目的開發當中遇到的一些問題以及解決辦法，因爲代碼在公司的內網，這是筆者一個字一個字碼出來的，如果覺得對你有所幫助，希望各位點個贊