二次封装时间组件

一花一世界,一叶一追寻。一曲一场叹,一生为一人。

二次封装时间组件

• 时间组件提交回显示类型为 moment 对象，而接口接受对象为 string 类型的对象，因此需要二次封装转化。

import React, { useEffect, useState } from 'react';
import { Form, TimePicker } from 'antd';
import moment from 'moment';

const dateFormat = 'HH:mm';

const TimePickerComponent = ({ value, onChange, props }) => {
  const triggerChange = (changedValue) => {
    onChange?.(changedValue);
  };
  const onChangeDate = (date) => {
    triggerChange(moment(date).format(dateFormat));
  };

  return (
    <div>
      <TimePicker
        defaultValue={value ? moment(value, dateFormat) : null}
        format={dateFormat}
        placeholder={`请输入${props.title}`}
        onChange={onChangeDate}
        style={{ width: '50%' }}
      />
    </div>
  );
};

const Time = (props) => {
  return (
    <Form.Item
      name={props.id}
      label={props.title}
      tooltip={props.descr}
      rules={[{ required: props.other.includes('required'), message: `请输入${props.title}` }]}
      initialValue={
        props.other.includes('defaultCurrentTime')
          ? new Date().getHours() + ':' + new Date().getMinutes()
          : null
      }
    >
      <TimePickerComponent props={props} />
    </Form.Item>
  );
};

export default Time;

• 提交回显都经过转化