在 React 和 Reactstrap 中将值传递给进度条答案

【问题标题】：passing value to progress bar in React and Reactstrap在 React 和 Reactstrap 中将值传递给进度条
【发布时间】：2018-08-13 21:19:56
【问题描述】：

我从来没有使用过进度条，所以我试图通过拼凑各种来源并尝试让它与 React 和 Reactstrap 一起工作来弄清楚。这对我来说似乎很有意义，但它不起作用。

这是有关 <Progress /> 的 reactstrap 文档。基本上，它需要一个 value 道具，所以我试图将它传递给一个方法，以便它可以动态更新，理论上应该使进度条移动。

https://reactstrap.github.io/components/progress/

但是，在我的情况下，条形图只更新到 5%，但console.log 确实更新到了 100。

这是我的组件。我在这里做错了什么？

import React, { Component } from 'react';
import {
    Progress
} from 'reactstrap';

export default class SectionLoading extends Component {
    progressValue() {
        let width = 1;
        return setInterval(() => {
            if (width <= 100) {
                console.log(width);
                width++;
            }
        }, 10)
    }

    render() {
        return (
            <Progress value={this.progressValue()} />
        ); 
    }
}

【问题讨论】：

您没有返回宽度。还是使用状态变量会更好

标签： reactjs reactstrap

【解决方案1】：

我认为 Progress 值应该采用数字而不是函数。那么，您能否尝试将<Progress value={this.progressValue()} /> 更改为<Progress value={this.state.width} />，然后在您的progressValue 函数中使用this.setState({ width }) 来更新状态。

【讨论】：

那我们如何调用progressValue函数呢？
@MonicaAcha 这将基于您的用例。你想什么时候开始进度条？也许在一开始（在componentDidMount中调用它）？也许在单击按钮后（在按钮单击事件中调用它）？

【解决方案2】：

this.state = {
    loaded:0,
}

和

<React.Fragment>
  <Progress max="100" color="success" value={this.state.loaded} > 
   {Math.round(this.state.loaded,2) }%</Progress>
<React.Fragment>

【讨论】：