0
185
VistasCómo crear un incremento en la barra de progreso en el que se puede hacer clic y disminuir el valor de la barra de progreso con un 20 %
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;Quiero incrementar el valor de la barra de progreso en un 20% en cada clic hasta el 100% y nuevamente disminuir el valor en un 20% hasta 0
p.ej
- incremento 20% 40% 60% 80% 100%
- disminuir de nuevo 100% 80% 60% 40% 20%
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
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;
·
Juan Pablo Isaza
Denunciar
0
Puedes hacer esto manipulando su ancho como
Demo en vivo
Aplicación.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 && initialWidth + 20 === 100) setIsIncrementing(false); if(!isIncrementing && 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; }
·
Juan Pablo Isaza
Denunciar
Responde la pregunta