如何实现点击进度条按20%步长增减支持从0到100%再回退到0

开发者阿泽

2026-9-30

可点击双向增减进度条实现方案

核心修改思路

你现有代码仅实现了单向递增到100%的逻辑，需要新增2部分逻辑：

新增isIncreasing状态记录当前是递增还是递减方向
边界值（0%/100%）触发时自动切换增减方向，中间数值按当前方向步进20%

完整可运行代码

import { useState } from 'react';

const App = () => {
  const [complete, setComplete] = useState(0);
  // 记录当前增减方向，默认初始为递增
  const [isIncreasing, setIsIncreasing] = useState(true);

  const handleClick = () => {
    // 用函数式更新避免异步闭包旧值问题
    setComplete(prevComplete => {
      // 边界触发方向切换
      if (prevComplete === 100) {
        setIsIncreasing(false);
        return prevComplete - 20;
      }
      if (prevComplete === 0) {
        setIsIncreasing(true);
        return prevComplete + 20;
      }
      // 中间值按当前方向步进
      return isIncreasing ? prevComplete + 20 : prevComplete - 20;
    })
  }

  return (
    <div 
      className="parentdiv" 
      onClick={handleClick}
      style={{width: '300px', height: '20px', border: '1px solid #eee', borderRadius: '10px', overflow: 'hidden', cursor: 'pointer'}}
    >
      {/* 进度填充层宽度绑定complete数值 */}
      <div 
        className="childdiv"
        style={{width: `${complete}%`, height: '100%', background: '#409eff', transition: 'width 0.2s ease'}}
      ></div>
    </div>
  )
}

export default App;