react引用antd的form表單

引用form是第三方插件ant插件，官網網址：https://ant.design/。用到的antd的版本是@2.0.1。form（https://ant.design/components/form/）表單頁面的大概樣子以下：

組件講解：

<Form></Form>表單，horizontal表示水平排列布局，數據類型是布爾，默認值爲false；onSubmit表示數據驗證成功後回調事件，數據類型是函；required表示必填，前面會顯示紅色的圖標。

<FormItem></FormItem>中包含的是一個小小的組件，能夠是文本框、單選按鈕、多選按鈕、下拉框等。{...formItemLayout}是reactjs中屬性的寫法{...props},formItemLayout標籤佈局，wrapperCol須要爲輸入控件設置佈局樣式時，和label 標籤佈局，通 <Col> 組件，設置 span offset 值，如{span: 3, offset: 12}。label標籤的文本。getFieldDecorator用於和表單進行雙向綁定，獲取該組件的值：this.props.form.getFieldDecorator(id, options)。詳細API以下：

其中詳細講解日期組件，代碼以下，getFieldDecorator中的id是timeRange，是form中惟一的；initialValue日期初始化的值，類型是[moment,moment]，moment(startDate).startOf('day')是將今天的日期轉換爲日期組件所能顯示的格式；rules表示校驗，數據類型是數組【】。如果沒選擇日期提交form表單時，會在日期組件輸出「請輸入時間段!",dateSelect方法是在提交的時候調用進行相對應的校驗，更多校驗請點擊該網址：https://github.com/yiminghe/async-validator。validateTrigger：校驗子節點值的時機。disabledDate表示來肯定不可選時段。紅框中的日期是不可選擇的。

 /**
     * 判斷推薦時間是否選擇
     */
    dateSelect(rule, value, callback) {
        if(!this.state.disabledDates){
            if(value===undefined){
                callback(new Error("請輸入時間段!"));
            }else{
                callback();
            }
        }else if(this.state.disabledDates){
            callback();
        }
    }

//設置日期組件所選擇的日期（所選擇的日期只能是今天及今天之後的）
        const disabledDate = function (current) {
           return  current  <= (new Date()).getTime()-1000*60*60*24;
        };

const date = new Date();
const startDate=date.toLocaleDateString();//獲取當前日期（年月日）

<FormItem wrapperCol={{span: 16, offset: 2}}>
       {getFieldDecorator('timeRange',
           {initialValue:[moment(startDate).startOf('day'),moment(startDate).endOf('day')]},
          {rules: [{validator: this.dateSelect.bind(this)},],},
         {validateTrigger:'onChange'})
        (<RangePicker disabled={this.state.disabledDates} disabledDate={disabledDate} />)}
</FormItem>

當form中的FormItem組件建立完畢，須要定義組件默認的屬性值以及校驗從父組件傳遞的屬性，最後再將form表單包起來。代碼以下：

//定義組件默認的屬性值(若是父組見沒有傳遞數據，使用默認數據)
CreateActivity.defaultProps = {};
//校驗從父組件傳遞的屬性值是否符合
CreateActivity.propTypes = {
    createDatas: React.PropTypes.object,
    createActions: React.PropTypes.object.isRequired
};
//將CreateActivity經過Form.create()包裝起來
export default CreateActivity = Form.create()(CreateActivity);

圖上有將form表單回顯的方法：mapPropsToFields，類型是一個方法：Function(props): Object{ fieldName: Object{ value } }

例如以上日期的回顯方法以下：

function mapPropsToFields(props) {
    if (props.editDatas.queryAtyDatas.atyQuerySuccess == 'yes') {
        var formData = props.editDatas.queryAtyDatas.ReturnDatas.data;
        //修改活動初始化操做
        return {
            "timeRange": {value: [moment(formData.startDate).startOf('day'), moment(formData.endDate).endOf('day')]}
        };
    }
}
//將初始化表單的方法mapPropsToFields包裹到EditActivity組件中
export default EditActivity = Form.create({
    mapPropsToFields: mapPropsToFields
})(EditActivity);

 

以上建立和修改就完成了。詳細代碼以下：

import {Row, Col, Select, Form, Input, Button, Checkbox, Radio, Tooltip, Icon,DatePicker} from 'antd';
import {Router, Route, browserHistory, hashHistory, IndexLink, Link} from 'react-router';
import React, {Component, PropTypes} from 'react'
import OperpConfig from './OperpConfig';

import css from '../css/activity.css';
import '../../../common/sass/operp/operp.scss';
var moment=require('moment');

const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const RangePicker = DatePicker.RangePicker;

class CreateActivity extends React.Component {
    constructor(props) {
        super(props);
        //取消
        this.handleCancel = this.handleCancel.bind(this);
        //提交訂單
        this.handleSubmit = this.handleSubmit.bind(this);
        //審批
        this.handleApprove = this.handleApprove.bind(this);
    }
    /*生命週期函數--->該方法在完成首次渲染以前被調用*/
    componentWillMount() {
        /* 設置推薦時段的狀態*/
        this.setState({
            disabledDates: false
        });
    }
    /*首次使用組建類時,組件已經被渲染，DOM操做請放在這*/
    componentDidMount() {
        let editDefaultformData = this.props.form.getFieldsValue();
    }

    /*存在期：隨着應用狀態的改變，以及組件逐漸受到影響，你將會看到下面的方法一次被調用：*/
    componentWillReceiveProps(nextProps) {
        let formData = this.props.form.getFieldsValue();
        /*當formData.timeFlag-1，表明不限時段，日期組件即將不可用，1是限時段日期組件能夠選用*/
        if (formData.timeFlag === '-1') {
            this.props.form.resetFields([['timeRange']]);
            this.setState({
                disabledDates: true
            });
        } else {
            this.setState({
                disabledDates: false
            });
        }

    }

    /**
     *條件：當組件肯定要更新，在 render 以前調用
     *用處：這個時候能夠肯定必定會更新組件，能夠執行更新前的操做
     *注意：方法中不能使用 setState ，setState 的操做應該在 componentWillReceiveProps 方法中調用
     * @param nextProps
     * @param nextState
     */
    componentWillUpdate(nextProps, nextState) {
    }

    /**
     * 組件已經被更新後的方法
     * @param nextProps
     * @param nextState
     */
    componentDidUpdate(nextProps, nextState) {
        /*建立活動成功後跳轉活動主界面*/
        if (this.props.createDatas.submitDatas.createSubmitSuccess == 'yes') {
            browserHistory.push('/activity');
        }
    }
    

    handleSubmit(e) {
        e.preventDefault();
        this.props.form.validateFields((errors, values) => {
            if (errors) {
                console.log('Errors in form!!!');
                return;
            }
            //全部的form表單值，等同於values
            const formData = this.props.form.getFieldsValue();
            //從表單中獲取日期timeRange的值(起始時間+結束時間)是個數組
            const timeRange = formData['timeRange'];
             /*如果不限時段 日期數組就爲null*/
            if(timeRange===undefined || formData['timeFlag']==='-1'){
                formData.startDate=null;
                formData.endDate=null;
            }else if(timeRange!==undefined && formData['timeFlag']==='1'){
                //格式化時間數組爲YYYYMMDD  startDate:起始時間 endDate：結束時間          
                formData.startDate=timeRange[0].format('YYYYMMDD');
                formData.endDate=timeRange[1].format('YYYYMMDD');
            }
            //默認添加建立人
            formData.createUser = '建立人1';
            this.props.createActions.createActivity(formData);
        });
    }

     /**
     * 判斷推薦時間是否選擇
     */
    dateSelect(rule, value, callback) {
        if(!this.state.disabledDates){
            if(value===undefined){
                callback(new Error("請輸入時間段!"));
            }else{
                callback();
            }
        }else if(this.state.disabledDates){
            callback();
        }
    }

    /**
     * 取消跳轉到活動主界面
     */
    handleCancel() {
        console.log('取消跳轉');
        browserHistory.push('/activity');
    }
    /**
     * 提交審批
     */
     handleApprove(e){
        alert('提交審批');
        console.log('提交審批');
     }
    render() {
        const {getFieldDecorator, getFieldError, isFieldValidating} = this.props.form;
        const formItemLayout = { labelCol: {span: 2}, wrapperCol: {span: 10},};
        //設置日期組件所選擇的日期（所選擇的日期只能是今天及今天之後的）
        const disabledDate = function (current) {
           return  current  <= (new Date()).getTime()-1000*60*60*24;
        };
        const date = new Date();
        const startDate=date.toLocaleDateString();
        const endDate = date.toLocaleDateString()+1;
        return (
            <div>
                <Row>
                    <Col span={24}>
                        <h1>新增推薦活動</h1>
                    </Col>
                </Row>
                <Row >
                    <Col span={24}>
                        <div className="edit-underline"></div>
                    </Col>
                </Row>
                <div className="text_dom">
                    <span className="span_text"><Icon type="exclamation-circle-o" className="icon_css"/>
                    設置完成後，系統自動對同一運營位不一樣位置輸出內容去重。
                    </span>
                </div>
                <Form horizontal onSubmit={this.handleSubmit}>
                    <FormItem
                        {...formItemLayout}
                        label="活動名稱"
                        required
                    >
                        {getFieldDecorator('activityName', {
                            rules: [
                                {required: true,
                                  message: '活動名稱不能爲空!'},
                            ],

                        })(
                            <Input type="text" placeholder="請輸入活動名稱..."/>
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="活動類型"
                    >
                        {getFieldDecorator('activityType', {initialValue: '1'})(
                            <RadioGroup>
                                <Radio value="1">正式運營</Radio>
                                <Radio value="2">A/B測試</Radio>
                            </RadioGroup>
                        )}
                    </FormItem>
                     <FormItem
                        {...formItemLayout}
                        label="推薦時段"
                    >
                        {getFieldDecorator('timeFlag', {initialValue: '1'})(
                            <RadioGroup>
                                <Radio value="1">限時段&nbsp;&nbsp;&nbsp;</Radio>
                                <Radio value="-1">不限時段</Radio>
                            </RadioGroup>
                        )}
                    </FormItem>
                     <FormItem wrapperCol={{span: 16, offset: 2}}>
                      {getFieldDecorator('timeRange',
                            {initialValue:[moment(startDate).startOf('day'),moment(startDate).endOf('day')]},
                            {rules: [{validator: this.dateSelect.bind(this)},],},
                            {validateTrigger:'onChange'})
                      (<RangePicker disabled={this.state.disabledDates} disabledDate={disabledDate} />)}
                    </FormItem>
                    <FormItem {...formItemLayout} label="備註">
                        {getFieldDecorator('comments')(<Input type="textarea" />)}
                    </FormItem>
                    <FormItem wrapperCol={{span: 16, offset: 2}} style={{marginTop: 24}}>
                        <Button type="primary" htmlType="submit">保存</Button>
                        &nbsp;&nbsp;&nbsp;
                        <Button type="primary" onClick={this.handleApprove.bind(this)}>提交審批
                        </Button>
                        &nbsp;&nbsp;&nbsp;
                        <Button type="ghost" onClick={this.handleCancel}>取消</Button>
                    </FormItem>
                </Form>
            </div>
        )
            ;
    }
}
//定義組件默認的屬性值(若是父組見沒有傳遞數據，使用默認數據)
CreateActivity.defaultProps = {};
//校驗從父組件傳遞的屬性值是否符合
CreateActivity.propTypes = {
    createDatas: React.PropTypes.object,
    createActions: React.PropTypes.object.isRequired
};

export default CreateActivity = Form.create()(CreateActivity);