reactjs antd -如果使用函数，则进度不显示动画

pdtvr36n 于 2022-12-03 发布在 React

关注(0)|答案(1)|浏览(240)

I try using Progress from antd . I use it in my react function component:
const [percent, setpercent] = useState(0)
if I use it directly in my onclick event, it works perfectly.

<div onClick={(e)=>{setpercent(10)}} >
click me
</div>

but if I use function to trigger the change:

function handlepercent(v){
  setpercent(v)
}

the value in the Progress will update, but it is not animated.
Not sure if it is the bug or is there something wrong with the code.

reactjs

来源：https://stackoverflow.com/questions/74637525/reactjs-antd-progress-not-animated-if-using-function

1条答案

按热度按时间

kpbwa7wx1#

请检查下面的代码
https://codesandbox.io/s/suspicious-estrela-liz522?file=/src/App.js

import { Progress } from "antd";
import { useState } from "react";
import "./styles.css";

export default function App() {
  const [percent, setpercent] = useState(0);

  function handlepercent(v) {
    setpercent(v);
  }

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Progress percent={percent} />
      <button type="button" onClick={() => handlepercent(50)}>
        50%
      </button>
      <button type="button" onClick={() => setpercent(100)}>
        100%
      </button>
    </div>
  );
}

赞(0）回复(0）举报 2022-12-03

我来回答

reactjs antd -如果使用函数，则进度不显示动画

1条答案

相关问题

热门标签

最新问答