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內，帶上類型驗證