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如下:
其中详细讲解日期组件,
/**
* 判断推荐时间是否选择
*/
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">限时段 </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>
<Button type="primary" onClick={this.handleApprove.bind(this)}>提交审批
</Button>
<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);
react引用antd的form表单的更多相关文章
- 【antd】form表单默认值设置
问题: 在antd的form表单的api里面有个"initialValues"可以设置默认值.但是表单没有更新 <Form name="test" for ...
- 封装react antd的form表单组件
form表单在我们日常的开发过程中被使用到的概率还是很大的,比如包含了登录.注册.修改个人信息.新增修改业务数据等的公司内部管理系统.而在使用时这些表单的样式如高度.上下边距.边框.圆角.阴影.高亮等 ...
- antd做form表单的组件共用,利用mapPropsToFields填写默认值
做单页应用,不管是用Vue还是React,或者其他,有一个重要的原则,就是:组件重用. 既然组件可以重用,那么当添加一个信息,和修改该信息的布局必然是一致的,这时候,最好的方法自然是利用同一个组件,在 ...
- ant-pro使用Form表单验证上传图片出现的问题
1.复现:用antd的Form表单验证上传图片必填项时出现问题:复现过程,先提交,提示图片需要上传,上传成功后,依旧提示:图片未上传 2.表单验证原理:先理解一下antd的Form表单验证的表层原理, ...
- React利用Antd的Form组件实现表单功能(转载)
一.构造组件 1.表单一定会包含表单域,表单域可以是输入控件,标准表单域,标签,下拉菜单,文本域等. 这里先引用了封装的表单域 <Form.Item /> 2.使用Form.create处 ...
- 前端笔记:React的form表单全部置空或者某个操作框置空的做法
1.全部置空的做法,一般在弹出框关闭后,需要重置该form所有表单: this.props.form.resetFields(); 2.针对某个操作框置空的做法 例如,form表单里有一个部门和一个张 ...
- antd中的form表单 initialValue导致数据不更新问题
初步理解 : initialValue就是所谓的defaultValue,只会在第一次赋值的时候改变,却又有一些不同,因为 initialValue又会因其他改动而改变. 然而当获取的数据重新上来要渲 ...
- And Design:拓荒笔记——Form表单
And Design:拓荒笔记——Form表单 Form.create(options) Form.create()可以对包含Form表单的组件进行改造升级,会返回一个新的react组件. 经 For ...
- React-Antd4的Form表单校验
之前很少用react做项目,最近入职新公司,用的react,在自己的摸索过程中,慢慢会记录一些使用方法.今天简单记录一下使用antd 4.0版本的Form表单校验,直接代码. 需要购买阿里云产品和服务 ...
随机推荐
- 有关binlog的那点事(二)(mysql5.7.13)
上次,我们仅仅把binlog做了一个概述,并没有去深入探索(1)binlog file究竟是怎么构成的?(2)binlog file的单元binlog events是怎么构成的?(3)我们能不能伪造出 ...
- 《C#高级编程》学习总结之LINQ
一.标准的查询操作符 标准查询操作符 说明 Where OfType<TResult> 筛选操作符定义了返回元素的条件. Select SelectMany 投射操作符用于把对象转换为另一 ...
- ClickOnce部署(2):自动更新
上次我们说了如何用最基本的方式用ClickOnce技术部署应用程序项目,本篇我们来认识一下如何让应用程序具备自动更新的功能. 我们依然通过实例来学习. 第一步,随便建一个应用程序项目,至于是控制台.W ...
- OpenCASCADE Make Primitives-Sphere
OpenCASCADE Make Primitives-Sphere eryar@163.com Abstract. The sphere is the simplest topology shape ...
- Android仿微信拍摄短视频
近期做项目需要添加上传短视频功能,功能设置为类似于微信,点击开始拍摄,设置最长拍摄时间,经过研究最终实现了这个功能,下面就和大家分享一下,希望对你有帮助. 1.视频录制自定义控件: /** * 视频播 ...
- AOE网的关键路径的计算
求关键路径,只需理解顶点(事件)和边(活动)各自的两个特征属性以及求法即可: Ø 先根据首结点的Ve(j)=0由前向后(正拓扑序列)计算各顶点的最早发生时间 Ø 再根据终结点的Vl(j)等于它的V ...
- AngularJS之Dependency Injection(五)
前言 这一节我们来讲讲AngularJS中的依赖注入,在实际开发中Angular提供了具体的方法供我们去调用,但是一旦业务不能满足要求或者出现麻烦或者错误时导致无从下手,所以基于此我们有必要深入一点去 ...
- 在ubuntu server中安装和配置docker
经过一段时间针对不同版本的学习,现在总结当前最新的安装配置过程(应该也是比较简单的) 如果不清楚什么是docker,请参考 https://www.docker.com/ 准备工作 建议在安装之前运行 ...
- 把DATATABLE,DS中的内容用HTML的方式显示
前几天,在搞一个数据显示的时候,因为是不固定的列的,所以需要动态创建列,这里面就运用一下,直接把数据库的Table显示在Html上,有两种方法,但是都有相应的缺点,第一个,如果内容太多,长度不好控制, ...
- OracleDBA之表管理
下面是Oracle表管理的部分,用到的测试表是oracle数据库中scott用户下的表做的测试,有的实验也用到了hr用户的数据,以下这些东西是我的麦库上存的当时学Oracle的学习笔记今天拿出来和大家 ...