Antdesign Form 實現頁面控件的賦值加載

使用Antdesign Form時，當頁面加載時，需要從后台獲取數據，對Form中控件的默認賦值。看似比較簡單的需求，而且Antdesign 官方文檔中也有相應介紹，然后對於Form 的CheckBox 的默認值加載，文檔中並沒有涉及。

需求: 當頁面記載時，從后台獲取當前Form 對象值，然后將值加載到控件中。如下圖，

 Form控件定義方式如下， 官網中案例使用Form.create方法創建一個對象，mapPropsToFields方法完成對控件賦初值，對於Input, Select等控件是完全沒問題，而對於checkbox 控件就無法生效了。

<FormItem label="Primary Keys" hasFeedback>
    {getFieldDecorator('primayKey', {rules: [{ required: true, message: 'Please Input Primay Key!' }],})(
   <Input placeholder="Please Input Primay Key" />)}
</FormItem>
<FormItem {...tailFormItemLayout}>
    {getFieldDecorator('isIgnoreFirstRow')(
      <Checkbox >Ignore First Row</Checkbox>
    )}
</FormItem>

const ingform = Form.create({ 
    name: 'ingestion_form' ,
    mapPropsToFields(props) {
        return {
            primayKey:Form.createFormField({
                ...props.stepObj,
                value:props.stepObj.paramMap.source_primary_keys
            }),
            ignoreFirstRow:Form.createFormField({
                ...props.stepObj,
                 value:props.stepObj.paramMap.source_is_ignore_first
            })

        }
    }
})(IngestionForm);

 察看了相關源碼，不難發現，其實源碼中有對其一定的描述，需要使用valuePropName對CheckBox 設置Checked狀態。

 

所以將關於Checkbox 代碼稍作修改，並且刪除mapPropsToFields方法中定義Checkbox filed 代碼段，就能正常工作了，而在form 中獲取該字段的方法仍然和其他控件一樣。

<FormItem {...tailFormItemLayout}>
                        {getFieldDecorator('isIgnoreFirstRow',{ 
                            valuePropName: 'checked',initialValue:stepObj.paramMap.source_is_ignore_first || false, })(
                        <Checkbox >Ignore First Row</Checkbox>
                        )}
</FormItem>