React封装多个时间段组件--BatchTime组件

最新推荐文章于 2024-04-17 10:03:19 发布

原创

最新推荐文章于 2024-04-17 10:03:19 发布 · 972 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react.js

本文档介绍了如何在React中封装一个用于处理多个时间段的BatchTime组件，详细阐述了需求背景、组件的具体封装步骤，并提供了组件代码示例，最后展示了如何在项目中调用该组件。

一、需求

在这里插入图片描述

二、组件封装

BatchTime.js

import React, {
   
    PureComponent, Fragment } from 'react';
import moment from 'moment';
import {
   
    Form, Row, Col, TimePicker, Icon, Button, message } from 'antd';
import styles from './index.less';

const FormItem = Form.Item;

// 判断时间段是否有重叠
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 = {
   
   };
  }

  //时间段，变化
  onTimePickerChange = (id, key, time) => {
   
   
    const {
   
    dispatch, timeBar, name, dispatchType } = this.props;
    let nextTimeBar = [];

    if (key == `time_start_${
     
     id}_${
     
     name}`) {
   
   
      nextTimeBar = timeBar.map(item => {
   
   
        return item.id != id
          ? item
          : {
   
   
              ...item,
              time_start: time ? moment(time).format('HH:mm') : '',
            };
      });
    } else if (key == `time_end_${
     
     id}_${
     
     name