React封装多个日期段组件--BatchDate组件

一、需求

二、组件封装

import React, { PureComponent, Fragment } from 'react';
import moment from 'moment';
import { Form, Row, Col, DatePicker, Icon, Button, message } from 'antd';
import styles from './index.less';const FormItem = Form.Item;
const RangePicker = DatePicker.RangePicker;
const formItemLayout = {labelCol: { span: 3 },wrapperCol: { span: 21 },
};// 判断时间段是否有重叠
const isAcrossMethod = (startTimeList, endTimeList) => {const begin = startTimeList.sort();const over = endTimeList.sort();for (let i = 1; i < begin.length; i++) {if (begin[i] <= over[i - 1]) {return true;}}return false;
};// 日期段组件
@Form.create()
export default class extends PureComponent {constructor(props) {super(props);this.state = {};}//日期变化onRangePickerChange = (id, dates) => {const { dateBar, dispatch, name, dispatchType } = this.props;let nextDateBar = dateBar.map(item => {return item.id != id? item: {...item,date_start: dates && dates.length ? moment(dates[0]).format('YYYY-MM-DD HH:mm:ss') : '',date_end: dates && dates.length ? moment(dates[1]).format('YYYY-MM-DD HH:mm:ss') : '',};});// console.log("nextDateBar==>", nextDateBar);dispatch({type: dispatchType,payload: { [name]: nextDateBar },});};//日期添加一条onAddOneBar = () => {const {form: { getFieldsValue, validateFields },dateBar,dispatch,name,dispatchType,} = this.props;const values = getFieldsValue();const reg = /^(date_bar_)/;const validateKeys = Object.keys(values).filter(key => reg.test(key));validateFields(validateKeys, errors => {if (errors) return false;//校验日期段不能重叠const startTimeList = dateBar.filter(item => item.date_start && item.date_end).map(item => item.date_start);const endTimeList = dateBar.filter(item => item.date_start && item.date_end).map(item => item.date_end);if (startTimeList.length > 1) {const isAcross = isAcrossMethod(startTimeList, endTimeList);if (isAcross) return message.error('日期区间不能有重叠');}//新加一条let nextDateBar = [...dateBar,{id: dateBar.reduce((maxId, item) => Math.max(item.id, maxId), -1) + 1,date_start: '',date_end: '',},];dispatch({type: dispatchType,payload: { [name]: nextDateBar },});});};//日期删除一条onRemoveOneBar = id => {const { dateBar, dispatch, name, dispatchType, disabled } = this.props;if (disabled) return false;dispatch({type: dispatchType,payload: {[name]: dateBar.filter(item => item.id != id),},});};render() {const {form: { getFieldDecorator },dateBar,name,disabled,} = this.props;const dateBarItems = dateBar.map(item => {return (<Row className={styles.excludeDiscountItem} key={item.id}><FormItem className={styles.datePicker}>{getFieldDecorator(`date_bar_${item.id}_${name}`, {initialValue: item.date_start? [moment(`${item.date_start}`, 'YYYY-MM-DD HH:mm:ss'),moment(`${item.date_end}`, 'YYYY-MM-DD HH:mm:ss'),]: null,rules: [{ type: 'array', required: true, message: '日期为必填项' }],})(<RangePickeronChange={this.onRangePickerChange.bind(this, item.id)}format="YYYY-MM-DD HH:mm:ss"showTime={{defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')]}}disabled={disabled ? true : false}/>)}</FormItem>{dateBar.length > 1 && (<IconclassName={styles.dynamicDeleteButton}type="minus-circle-o"onClick={() => this.onRemoveOneBar(item.id)}/>)}</Row>);});return (<Fragment><FormItem {...formItemLayout} className={styles.excludeDiscount}>{dateBarItems}</FormItem>{dateBar.length < 20 && (<Buttonstyle={{ width: 70, marginTop: '-10px' }}type="link"icon="plus-circle"onClick={() => this.onAddOneBar()}disabled={disabled ? true : false}>添加时间</Button>)}</Fragment>);}
}

//日期bar
.excludeDiscount {.excludeDiscountItem {display: flex;flex-direction: row;min-height: 60px;.datePicker {// max-width: 240px;min-width: 220px;// width: 22%;}.dynamicDeleteButton {margin-left: 6px;}}
}

三、调用

 <BatchDatename="selectedOpenDate"dateBar={formParams.selectedOpenDate}dispatch={dispatch}dispatchType="hallFeeForm/setFormData"disabled={this.status == 'view'}/>

React封装多个日期段组件--BatchDate组件相关推荐

react封装函数_GitHub - daifee/react-component: 用 React 封装一套常用组件
Daifee-React-Component 用 React 封装一套常用组件所有组件都是 stateless 组件,但为方便,某些组件提供 API 调用方式的静态方法. [TOC] 使用前须知源 ...
react封装函数_React中函数式声明组件
前文介绍的组件的定义方式主要是声明式组件,其与传统的jQuery中以DOM操作为核心的命令式组件生成相比具有更大的灵活性与可组合性.而实际上随着应用复杂度与所需要的组件数目的持续增加,我们所需要的组件 ...
vue3封装时间计算-日期倒计时组件——还有XX天第XX天
vue3封装时间计算-日期倒计时组件--还有XX天 & 第XX天 & 年月日时分秒星期几方法的封装 & setup语法糖完整用法之reactive, ref, onMounte ...
编写react组件_React组件的“黄金法则”如何帮助您编写更好的代码
编写react组件以及钩子如何发挥作用 (And how hooks come into play) Recently I've adopted a new philosophy that chan ...
react 组件引用组件_React Elements VS React组件
react 组件引用组件 A few months ago I posted to Twitter what I thought was a simple question: 几个月前,我在Twitt ...
封装html ui 控件,聊聊前端 UI 组件：组件设计
本文首发于欧雷流.由于我会时不时对文章进行补充.修正和润色,为了保证所看到的是最新版本,请阅读原文. 在本系列文章<聊聊前端 UI 组件:组件体系>中初步说明了 UI 组件的架构设计,本文 ...
React简介、虚拟DOM、Diff算法、创建React项目、JSX语法、组件、组件声明方式、组件传值props和state、组件的生命周期
React简介: 前面只是简单介绍移动APP开发,后面还会继续深入介绍移动app开发:其中想要用ReactNative开发出更出色的应用,那么就得学好React,下面将介绍React: React 是 ...
用react模仿知乎的用户头像裁剪组件
用react模仿知乎的用户头像裁剪组件前段时间刷知乎的时候,更换换了下头像,突然发现知乎头像编辑器很简洁酷炫,于是乎就用react尝试模仿做一个组件. 知乎上的这个是用canvas处理的,但是用di ...
react 组件引用组件_动画化React组件
react 组件引用组件 So, you want to take your React components to the next level? Implementing animations c ...
APICloud AVM框架封装SKU（商品规格选择）组件
AVM(Application-View-Model)前端组件化开发模式基于标准Web Components组件化思想,提供包含虚拟DOM和Runtime的编程框架avm.js以及多端统一编译工具,完 ...

React封装多个日期段组件--BatchDate组件

一、需求

二、组件封装

三、调用

React封装多个日期段组件--BatchDate组件相关推荐

最新文章

热门文章