自定義元件

1、自定義元件被getFieldsValue包裹，會獲得以下屬性

onChange方法,子元件呼叫此方法，可將值傳給父元件，從而Form可拿到自定義元件的值

value屬性，獲得初始值

2、元件呼叫

像Form表單內的元件一樣呼叫，就可以了

補充知識：Ant Design Pro，用setFieldsValue方法，給巢狀到Form表單中的DatePicker或RangePicker元件設定預設值

其實用setFieldsValue或者獲取setState方法都可以設定DatePicker的預設值。

但是關鍵點在於，引用moment方法轉換日期格式

1、setState方法，利用FormItem元件的initialValue屬性設定預設值：

import moment from 'moment'; 
this.setState({defaultDate}) // 自定義預設日期
 
<FormItem label="日期選擇框">
  {getFieldDecorator('date',{
    initialValue: moment(this.state.defaultDate,'YYYY-MM-DD'),})(
    <DatePicker format={'YYYY-MM-DD'} />
  )}
</FormItem>

2、setFieldsValue方法，利用form的setFieldsValue屬性賦值：

import moment from 'moment'; 
this.props.form.setFieldsValue({
  "date": moment("自定義預設日期",'YYYY-MM-DD')
})
 
<FormItem label="日期選擇框">
  {getFieldDecorator('date',{
    rules: [{ required: true }],})(
    <DatePicker format={'YYYY-MM-DD'} />
  )}
</FormItem>

RangePicker同理，只是 initialValue 變成了陣列 [ moment( startDate ),moment( endDate )]

以上這篇antd Form元件方法getFieldsValue獲取自定義元件的值操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。