如何在两个设定日期之间使用 Material UI “进度指示器”？答案

【问题标题】：How to use Material UI "Progress Indicator" between two set dates?如何在两个设定日期之间使用 Material UI “进度指示器”？
【发布时间】：2020-07-06 19:25:55
【问题描述】：

我正在尝试在我的网站中添加一个功能，其中在两个设定日期（相隔 24 小时）之间有一个进度条，并且我正在努力寻找提供此功能的包。我一直在使用 Material UI 来创建网站的其他部分，并希望通过我找到的 component 来实现这一点。

我认为使用“线性确定”选项是有意义的，其代码如下所示，但想知道如何将其从持续 500 毫秒修改为在给定设定起点后持续 24 小时。

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import LinearProgress from '@material-ui/core/LinearProgress';

const useStyles = makeStyles({
  root: {
    width: '100%',
  },
});

export default function LinearDeterminate() {
  const classes = useStyles();
  const [progress, setProgress] = React.useState(0);

  React.useEffect(() => {
    const timer = setInterval(() => {
      setProgress((oldProgress) => {
        if (oldProgress === 100) {
          return 0;
        }
        const diff = Math.random() * 10;
        return Math.min(oldProgress + diff, 100);
      });
    }, 500);

    return () => {
      clearInterval(timer);
    };
  }, []);

  return (
    <div className={classes.root}>
      <LinearProgress variant="determinate" value={progress} />
    </div>
  );
}

如果对上述代码提出任何一般性建议/修改，我们将不胜感激！谢谢。

【问题讨论】：

标签： reactjs date material-ui progress-bar

【解决方案1】：

我想通了！事实证明这很简单，我所要做的就是调用一个函数来计算给定时间范围内剩余的时间，并将其作为 LinearProgress 组件的“值”传递，请参见下面的代码：

getProgressValue = (event, issue_date) => {
   let rightNow = new Date();
        
   let timePassed = rightNow - new Date(issue_date);
   let msInADay = 1000*60*60*24;
   let toReturn = (timePassed/msInADay) * 100;
   return toReturn;
}

<LinearProgress
   className="linearProgressMarginTop"
   variant="determinate"
   value={this.getProgressValue(event, req.issue_date)}
/>

【讨论】：