react使用antd表单

引用form是第三方插件ant插件，官网网址：https://ant.design/。用到的antd的版本是@2.0.1。form（https://ant.design/components/form/）表单页面的大概样子如下：

image.png

组件讲解：

<Form></Form>表单

，

horizontal表示水平排列布局，数据类型是布尔，默认值为false；onSubmit表示数据验证成功后回调事件，数据类型是函；required表示必填，前面会显示红色的图标。

中包含的是一个小小的组件，可以是文本框、单选按钮、多选按钮、下拉框等。{...formItemLayout}是reactjs中属性的写法{...props},formItemLayout标签布局，wrapperCol需要为输入控件设置布局样式时，和label 标签布局，通

<Col>

组件，设置

span

offset

值，如{span: 3, offset: 12}

。label标签的文本。getFieldDecorator用于和表单进行双向绑定，获取该组件的值：this.props.form.getFieldDecorator(id, options)。详细API如下：

image.png

其中详细讲解日期组件，

image.png

代码如下，getFieldDecorator中的id是timeRange，是form中唯一的；initialValue日期初始化的值，类型是[moment,moment]，moment(startDate).startOf('day')是将今天的日期转换为日期组件所能显示的格式；rules表示校验，数据类型是数组【】。若是没选择日期提交form表单时，会在日期组件输出“请输入时间段!",dateSelect方法是在提交的时候调用进行相对应的校验，更多校验请点击该网址：https://github.com/yiminghe/async-validator

。

validateTrigger：校验子节点值的时机。disabledDate表示来确定不可选时段

。

image.png

红框中的日期是不可选择的。

/**
* 判断推荐时间是否选择
*/

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();//获取当前日期（年月日）

{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);

image.png

图上有将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>

            </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);