在React和Reactstrap中将值传递到进度条
在React和Reactstrap中将值传递到进度条
提问于 2018-03-06 13:00:44
我从来没有使用过进度条，所以我试图通过拼凑各种源码来弄清楚，并试图让它与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()} />
);
}
}回答 2
Stack Overflow用户
回答已采纳
发布于 2018-03-06 13:21:58
我认为Progress值应该接受一个数字，而不是一个函数。那么，您是否可以尝试将<Progress value={this.progressValue()} />更改为<Progress value={this.state.width} />，然后在您的progressValue函数中使用this.setState({ width })更新状态。
Stack Overflow用户
发布于 2020-03-29 17:53:14
this.state = {
loaded:0,
}和
<React.Fragment>
<Progress max="100" color="success" value={this.state.loaded} >
{Math.round(this.state.loaded,2) }%</Progress>
<React.Fragment>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49123684
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号