antd outofdate 表单_react引用antd的form表单

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 (

新增推荐活动

设置完成后，系统自动对同一运营位不同位置输出内容去重。

{...formItemLayout}

label="活动名称"

required

>

{getFieldDecorator('activityName', {

rules: [

{required: true,

message: '活动名称不能为空!'},

],

})(

)}

{...formItemLayout}

label="活动类型"

>

{getFieldDecorator('activityType', {initialValue: '1'})(

正式运营

A/B测试

)}

{...formItemLayout}

label="推荐时段"

>

{getFieldDecorator('timeFlag', {initialValue: '1'})(

限时段   

不限时段

)}

{getFieldDecorator('timeRange',

{initialValue:[moment(startDate).startOf('day'),moment(startDate).endOf('day')]},

{rules: [{validator: this.dateSelect.bind(this)},],},

{validateTrigger:'onChange'})

()}

{getFieldDecorator('comments')()}

保存

提交审批

取消

)

;

}

}

//定义组件默认的属性值(如果父组见没有传递数据，使用默认数据)

CreateActivity.defaultProps = {};

//校验从父组件传递的属性值是否符合

CreateActivity.propTypes = {

createDatas: React.PropTypes.object,

createActions: React.PropTypes.object.isRequired

};

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