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

前端砖家^_^

于 2021-12-06 11:36:14 发布

阅读量591

点赞数

CC 4.0 BY-SA版权

分类专栏： React 文章标签： react.js javascript 前端

本文链接：https://blog.youkuaiyun.com/html5_mylove/article/details/121743425

本文介绍如何在React中封装一个用于选择多个日期段的BatchDate组件，包括需求分析、组件实现细节以及在实际项目中的调用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、需求

在这里插入图片描述

二、组件封装

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(

最低0.47元/天解锁文章