如何在 Ant design 中编辑进度条的百分比？

Question

我现在正在使用react js并导入ant design progress组件（参见https://ant.design/components/progress/）但是我无法在显示后用 javascript 编辑栏的百分比。我将启动此 Html 代码。

<Progress id="progressBar" 

strokeColor={{from: '#108ee9', to: '#87d068'}}

percent={0}

status="active"/>

我试图调用 progressBar.percent 进行编辑，但它不起作用。

Answer 1

只需将百分比存储在 useState

const [percent, setPercent] = useState(0)

并将其传递给进度：

<Progress id="progressBar" 
strokeColor={{from: '#108ee9', to: '#87d068'}}
percent={percent}
status="active"/>

然后只需调用 setPercent(50) 即可更改您的状态。

这是在 React 中处理状态的基本原则。你可以阅读更多here

How can I edit the percent of progress bar in Ant design?