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

Question

I am now using react js and importing the ant design progress component(see https://ant.design/components/progress/ ) But I fail to edit the percentage of the bar with javascript after it is displayed. I initiate it will this Html code.

<Progress id="progressBar" 

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

percent={0}

status="active"/>

I tried to call progressBar.percent to edit but it does not work.

Answer 1

Just store your pecentage in useState

const [percent, setPercent] = useState(0)

and pass it to Progress:

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

and then simply call setPercent(50) to change your state.

This is fundamental principe how to work with states in react. You can read more here