Javascript Reactjs中两个进度条组件的单一状态

我已经创建了一个通用组件来显示进度。需要道具“type”来呈现进度类型。类型为“条形”进度和“圆形”进度。将显示进度条，当我单击手风琴时，会显示如下循环进度：

我想要的是，如果我在任何进度（条形或圆形）上单击“暂停”，两个进度都应该停止。以下是此通用进度组件的代码：

import React, {Component} from 'react';
import CircularProgressBar from 'react-circular-progressbar';
import config from '../../config';
import './Progress.css';
import './ProgressCircular.css';

class GenericProgress extends Component {

    constructor(props) {
        super(props);
        this.state = {
            progressPercent: props.progress,
            width: "100%",
            startTime: props.startTime,
            progressStatus: props.status,
            extractId: props.extractId,
        };

        this.tick=this.tick.bind(this);
    }

    tick() {
        const reqObj={
            "op": "progress",
            "extractID" : this.props.extractId,
            "last_ts" : this.state.last_ts,
            "progress": this.state.progressPercent,
        };
        fetch(`${config.apiHost}/extracttool/extract`,
            {
                method: 'POST',
                body: JSON.stringify(reqObj),
                headers: {
                    'Content-Type': 'application/json'
                }
            }
        ).then((response) => {
            return response.json();
        }).then((data) => {
            if(this.state.progressStatus !== 'Paused' ) {
                const progressCounter = data.payload.progress;
                const last_ts = data.payload.last_ts;
                if (progressCounter >= 100) {
                    this.props.changeExecutionStatus('Complete');
                    this.setState({...this.state, progressPercent: 100, progressStatus: 'Complete'});
                    clearInterval(this.timerID);
                } else {
                    this.setState({
                        ...this.state,
                        progressPercent: progressCounter,
                        last_ts: last_ts
                    });
                }
            }
        });
    }

    callApi = (reqObj, status) => {

        fetch(`${config.apiHost}/extracttool/extract`,
            {
                method: 'POST',
                body: JSON.stringify(reqObj),
                headers: {
                    'Content-Type': 'application/json'
                }
            }
        ).then((response) => {
            return response.json();
        }).then((data) => {
            this.setState({
                progressStatus: status
            });
        });
    }

    componentDidMount() {
        if (this.state.progressStatus === 'Progress' ) {
            this.startTimer();
        }
    }

    onPause = () => {
        this.props.changeExecutionStatus('Paused');
        clearInterval(this.timerID);
        const reqObj={
            op: "flow_control",
            extractID: this.props.extractID,
            value: "pause"
        };
        this.callApi(reqObj, 'Paused');
    }

    startTimer = () => {
        this.timerID = setInterval(
            () => this.tick(),
            2500
        );
    }

    onResume = () => {
        this.props.changeExecutionStatus('Progress');
        const reqObj={
            op: "flow_control",
            extractID: this.props.extractId,
            value: "resume"
        };
        this.callApi(reqObj, 'Progress');
        this.startTimer();
    }

    onCancel = () => {
        this.props.changeExecutionStatus('Cancelled');
        clearInterval(this.timerID);
        const reqObj={
            op: "flow_control",
            extractID: this.props.extractId,
            value: "cancel"
        };
        this.callApi(reqObj, 'Cancelled');
    }

    componentWillUnmount() {
        clearInterval(this.timerID);
    }

    render() {
        const { progressStatus, progressPercent, startTime } = this.state;

        let progressClass = progressStatus === 'Complete' ? 'progress-bar progress-bar-success' : 'progress-bar';
        if ( progressStatus === 'Paused' ) {
            progressClass = 'progress-bar-warning progress-bar';
        } else if( progressStatus === 'Cancelled' ) {
            progressClass = 'progress-bar-danger progress-bar';
        }

        return (
            <div className="progress-bar-container">
                {
                    this.props.type === 'bar' &&
                    <div>
                        <div className="progress">
                            <span className="progressStartTime">Start Time: {startTime}</span>
                            <div
                                className={progressClass}
                                role="progressbar"
                                aria-valuenow={ progressPercent }
                                aria-valuemin="0"
                                aria-valuemax="100"
                                style={{width: progressPercent + "%"}}
                            >
                            </div>
                        </div>
                        <span className="extractProgress">{progressPercent < 100 ? progressStatus + ': '+this.state.progressPercent + '%' : 'Complete'}</span>
                        {
                            progressStatus === 'Paused' &&
                            <span className="playIcon" onClick={this.onResume}> </span>
                        }
                        {
                            progressStatus === 'Progress' &&
                            <span className="pauseIcon" onClick={this.onPause}> </span>
                        }
                        {
                            progressStatus !== 'Complete' && progressStatus !== 'Cancelled' &&
                            <span className="cancelIcon" onClick={this.onCancel}> </span>
                        }
                    </div>
                }
                {
                    this.props.type === 'circular' &&
                    <div>
                        <div className="CircularProgress">
                            {
                                progressStatus === 'Paused' &&
                                <span className="playIcon" onClick={this.onResume}> </span>
                            }
                            {
                                progressStatus === 'Progress' &&
                                <span className="pauseIcon" onClick={this.onPause}> </span>
                            }
                            <CircularProgressBar percentage={progressPercent} />
                            {
                                progressStatus !== 'Complete' && progressStatus !== 'Cancelled' &&
                                <span className="cancelIcon" onClick={this.onCancel}> </span>
                            }
                        </div>
                    </div>
                }
            </div>
        );
    }
}

export default GenericProgress;

import React，{Component}来自'React'；
从“react circular progressbar”导入CircularProgressBar；
从“../../config”导入配置；
导入“/Progress.css”；
导入“/ProgressCircular.css”；
类GenericProgress扩展组件{
建造师（道具）{
超级（道具）；
此.state={
progressPercent:props.progress，
宽度：“100%”，
开始时间：道具，开始时间，
progressStatus：道具状态，
extractId:props.extractId，
};
this.tick=this.tick.bind（this）；
}
勾选（）{
常数REKOBJ={
“op”：“进步”，
“extractID”：this.props.extractID，
“最后一刻”：这个。状态。最后一刻，
“进度”：this.state.progressPercent，
};
fetch（`${config.apiHost}/extracttool/extract`，
{
方法：“POST”，
正文：JSON.stringify（reqObj），
标题：{
“内容类型”：“应用程序/json”
}
}
)。然后（（响应）=>{
返回response.json（）；
})。然后（（数据）=>{
如果（this.state.progressStatus！=“暂停”）{
const progressCounter=data.payload.progress；
const last_ts=data.payload.last_ts；
如果（进程计数器>=100）{
此.props.changeExecutionStatus（'Complete'）；
this.setState（{…this.state，progressPercent:100，progressStatus:'Complete'}）；
clearInterval（this.timerID）；
}否则{
这是我的国家({
…这个州，
progressPercent:progressCounter，
最后的：最后的
});
}
}
});
}
callApi=（请求对象，状态）=>{
fetch（`${config.apiHost}/extracttool/extract`，
{
方法：“POST”，
正文：JSON.stringify（reqObj），
标题：{
“内容类型”：“应用程序/json”
}
}
)。然后（（响应）=>{
返回response.json（）；
})。然后（（数据）=>{
这是我的国家({
进度状态：状态
});
});
}
componentDidMount（）{
if（this.state.progressStatus===='Progress'）{
这个。startTimer（）；
}
}
onPause=（）=>{
this.props.changeExecutionStatus（“暂停”）；
clearInterval（this.timerID）；
常数REKOBJ={
op:“流量控制”，
extractID:this.props.extractID，
值：“暂停”
};
this.callApi（reqObj，“暂停”）；
}
startTimer=（）=>{
this.timerID=setInterval(
（）=>这个。勾选（），
2500
);
}
onResume=（）=>{
this.props.changeExecutionStatus（“进度”）；
常数REKOBJ={
op:“流量控制”，
extractID:this.props.extractID，
值：“恢复”
};
这是callApi（reqObj，“进度”）；
这个。startTimer（）；
}
onCancel=（）=>{
此.props.changeExecutionStatus（'Cancelled'）；
clearInterval（this.timerID）；
常数REKOBJ={
op:“流量控制”，
extractID:this.props.extractID，
值：“取消”
};
这个.callApi（reqObj，“已取消”）；
}
组件将卸载（）{
clearInterval（this.timerID）；
}
render（）{
const{progressStatus，progressPercent，startTime}=this.state；
让progressClass=progressStatus==‘完成’？‘进度条进度条成功’：‘进度条’；
如果（progressStatus==“暂停”）{
progressClass='进度条警告进度条'；
}否则，如果（progressStatus==‘已取消’）{
progressClass='进度条危险进度条'；
}
返回(
{
this.props.type==='bar'&&
开始时间：{startTime}
{progressPercent<100？progressStatus+'：'+this.state.progressPercent+'%'：'完成'}
{
progressStatus==“暂停”&&
}
{
progressStatus===“进度”&&
}
{
progressStatus！==“完成”和&progressStatus！==“取消”&&
}
}
{
this.props.type==='circular'&&
{
progressStatus==“暂停”&&
}
{
progressStatus===“进度”&&
}
{
progressStatus！==“完成”和&progressStatus！==“取消”&&
import React from 'react';
import { Panel, Row } from 'react-bootstrap';
import {Link} from 'react-router-dom';
import GenericProgress from './GenericProgress';
import LogFile from './LogFile';
import moment from 'moment'
import './Extract.css';

class Extract extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            open: props.isOpen ? true : false,
            executionStatus: this.props.data.execution_status
        }

        this.changeExecutionStatus = this.changeExecutionStatus.bind(this);
    }

    componentWillReceiveProps(newProps) {
        if(this.props !== newProps){
            if(this.state.executionStatus !== this.props.execution_status) {
                console.log(this.state.executionStatus);
                this.changeExecutionStatus(this.state.executionStatus);
            }
        }
    }

    changeExecutionStatus(status) {
        this.setState({
            executionStatus: status
        })
    }

    render() {
        const {name, progress, start_time, end_time, execution_status, id, engagement} = this.props.data;
        const start_date_time = moment(start_time).format('MMMM Do YYYY, h:mm:ss a');
        const end_date_time = moment(end_time).format('MMMM Do YYYY, h:mm:ss a');

        const startTime = start_date_time.split(',')[1];
        const startDate = start_date_time.split(',')[0];

        const endTime = end_date_time.split(',')[1];
        const endDate = end_date_time.split(',')[0];

        return (
          <div className="extract">
               <div>
               <span className={ this.state.open ? "arrowUpIcon" : "arrowDownicon" } onClick={() => {this.setState({open: !this.state.open})}}></span>
               <h4>
                   {
                     this.props.clientDetails ?
                       <Link to={{
                           pathname: '/client/'+this.props.clientId,
                           state: {
                               extractId: id,
                               engagementId: engagement,
                               source: 'extractDirect'

                           }
                       }} >{name}</Link>
                       :
                       name
                   }
               </h4>
               <div className="progressBar">
                   <GenericProgress
                       type="bar"
                       progress={progress}
                       startTime={start_time}
                       status={this.state.executionStatus}
                       extractId={id}
                       changeExecutionStatus={this.changeExecutionStatus} />
               </div>
                   <Panel collapsible expanded={this.state.open}>
                       <div>
                           <Row>
                               <div className="col-lg-3">
                                   <div>
                                       <GenericProgress
                                           type="circular"
                                           progress={progress}
                                           startTime={start_time}
                                           status={this.state.executionStatus}
                                           extractId={id}
                                           changeExecutionStatus={this.changeExecutionStatus} />
                                   </div>
                                   <br/>
                                   <div>
                                       <b>Start Time:</b> {startTime}
                                       <br/>
                                       <b>Start Date:</b> {startDate}
                                       <br/><br/><br/>
                                       <b>End Time:</b> {endTime}
                                       <br/>
                                       <b>End Date:</b> {endDate}
                                   </div>
                               </div>
                               <div className="col-lg-9">
                                   <LogFile
                                       startDate={startDate}
                                       startTime={startTime}
                                       status={execution_status}
                                   />
                               </div>
                           </Row>
                       </div>
                   </Panel>
               </div>
          </div>
        );
    }
}

export default Extract;