Блог

Главная - Вопросы по программированию - Как создать кликабельный индикатор выполнения, увеличивающий и уменьшающий значение индикатора выполнения с 20%

Как создать кликабельный индикатор выполнения, увеличивающий и уменьшающий значение индикатора выполнения с 20%

#javascript #reactjs

Вопрос:

 const [complete, setComplete] = useState(0);

handleClick=() => {
  
    if(complete < 100)
    {
        setComplete(complete   20);  
    }
}
return(

<div className="prentdiv" onClick={handleClick}>
 <div className="childdiv></div>
</div>

)

export default App;

Я хочу увеличивать значение панели прогресса на 20% при каждом щелчке до 100% и снова уменьшать значение на 20% до 0

например

  • приращение 20% 40% 60% 80% 100%
  • уменьшите снова 100% 80% 60% 40% 20%

Комментарии:

1. Это неверный код. Пожалуйста, опубликуйте весь компонент целиком.

2. вам нужно дополнительное состояние, чтобы определить текущее направление приращения. Вкратце я приведу вам пример.

Ответ №1:

Вы можете сделать это, изменив его ширину следующим образом

Живая демонстрация

Демо-версия Codesandbox

App.js

 import React, { useState } from 'react';

const App = () => {
    const [isIncrementing, setIsIncrementing] = useState( true );
    const [initialWidth, setInitialWidth] = useState( 20 );

    const changeWidth = () => {
        if ( isIncrementing ) setInitialWidth(oldWidth => oldWidth   20);
        else setInitialWidth(oldWidth => oldWidth - 20);
        if(isIncrementing amp;amp; initialWidth   20 === 100) setIsIncrementing(false);
        if(!isIncrementing amp;amp; initialWidth - 20 === 0) setIsIncrementing(true);
    }

    return (
        <div>
            <div className="progress-bar-wrapper" onClick={changeWidth}>
                <div className="progress-bar" style={{ width: `${initialWidth}%` }}></div>
            </div>
        </div>
    );
};

export default App;

CSS

 .progress-bar-wrapper{
    width: 300px;
    height: 1rem;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 1rem;
}

.progress-bar{
    background-color: blueviolet;
    border-radius: 1rem;
    height: 100%;
    transition: width ease-out 0.3s;
}

Ответ №2:

 import { useState } from "react";

function App() {
  const [progress, setProgress] = useState(0);
  const [progressDirection, setProgressDirection] = useState("asc");

  function increment() {
    if (progress === 100) {
      setProgressDirection("desc");
      setProgress(80);
    } else {
      setProgress((currentProgress) => currentProgress   20);
    }
  }
  function decrement() {
    if (progress === 0) {
      setProgressDirection("asc");
      setProgress(20);
    } else {
      setProgress((currentProgress) => currentProgress - 20);
    }
  }
  function handleClick() {
    if (progressDirection === "desc") {
      decrement();
    } else {
      increment();
    }
  }
  return <div className="App">
    <div>{progress}</div>
    <button onClick={handleClick}>Click</button>
  </div>;
}

export default App;

Комментарии:

1. Это некрасиво и должно быть переработано, но я думаю, что для вас это ясно.

2. обратите внимание, что я использовал функциональную форму вызовов setState, чтобы убедиться, что используются правильные значения, b/c Вызовы setState являются асинхронными.

Метки: ,