一、需求

二、組件封裝

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 }, };// 判斷時(shí)間段是否有重疊 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;//校驗(yàn)日期段不能重疊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('日期區(qū)間不能有重疊');}//新加一條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: '日期為必填項(xiàng)' }],})(<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}>添加時(shí)間</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;}} }

三、調(diào)用

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

總結(jié)

以上是生活随笔為你收集整理的React封装多个日期段组件--BatchDate组件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。