react with form

本部分主要為表單相關。

1.表單form的react使用流程。

A.引入antd插件，聲明FormItem

import {Form} from 'antd';

const FormItem = Form.Item;

B.包裝屬性，使組件帶有this.props.form屬性

schoolEdit = Form.create({})(schoolEdit);

C.在render中聲明要使用到的this.props.form帶的api

const {getFieldDecorator} = this.props.form;

一個完整的表單：

<FormItem {...formItemLayout} label="詳細地址：" hasFeedback >
        {getFieldDecorator('address', {rules: [{ required: true, message: '請輸入詳細地址1-100字符',type: "string",pattern: /^.{1,100}$/  }],})(<Input  placeholder="請輸入詳細地址"/>)}
</FormItem>

2.select選項showsearch屬性實時匹配搜索。

3.如果rules里面的內容為空，會默認驗證類型是否為string。

4.form里面嵌入form使用format時將會報錯

5.select在表單加上默認值時應當為option的value值，常見加入選擇全部如下：

<Option key={-1} value={null}>全部人員</Option>

6.同一頁面不能有兩個表單項名字一樣，同一頁面如果有多個表單，提交時驗證混亂，全部將會一起提交。

解決辦法，采用父子組件的形式，或者單獨提交某些項。

7.時間項的必填等規則在rules里面無效，可以在formItem里面寫required。

8.input組件若沒有結尾符將會報錯，若沒有首字母大寫則樣式丟失。

9.若表單e.target。value來取值時報錯，則采用傳參數value來獲取。

10.時間編輯時回顯

const date=detail.take_time?moment(detail.take_time, 'YYYY-MM-DD'):null;
<FormItem {...formItemLayout} label="建校時間：" hasFeedback >
         {getFieldDecorator('schooltime', {initialValue:date, rules: [{type:"object"}], })(
               <DatePicker placeholder="請選擇建校時間" style={{ width: '160px' }}/>
          )}
 </FormItem>            

11.設置必填可以rule里requore：true，也能直接在formItem設置required。

12.獲取單個表單的值：var aa = this.props.form.getFieldValue('aa');

重置單個表單：this.props.form.resetFields(["aa",""]);

13.單選按鈕里賦值不能采用大括號，要使用引號，select option賦值是大括號

<RadioGroup>

　　<Radio value="1">啟用</Radio>

</RadioGroup>

14.表單中getFieldDecorator必須寫上名字，不然報錯

15.表單的驗證規則寫在rule內，帶上類型驗證