Tengo un formulario que "desliza" los diferentes pasos como tarjetas, por ejemplo, al pasar del paso 1 al paso 2, la tarjeta aparece desde la derecha, y al retroceder, por ejemplo, del paso 3 al paso 2, la tarjeta se desliza desde la izquierda.
Mi problema es que la dirección está "un paso atrás", se necesitan dos clics en una dirección para que la transición se recupere.
Cuando se hace clic en los botones anterior/siguiente, se llama a handleActive() :
const handleActive = (num, text) => { setDirection(text) setActive(num) }Un ejemplo de una tarjeta div
<div className={active === 2 ? 'card-active' : 'card-' + direction}> <h4>Step {active}</h4> <input className='input' type="text" name="name" id="name" placeholder='Name' /> <input className='input' type="text" name="address" id="address" placeholder='Address' /> <input className='input' type="text" name="phone" id="phone" placeholder='Phone' /> <button className='btn' type="button" onClick={() => handleActive(-1, 'from-left')}>PREV</button> <button className='btn' type="button" onClick={() => handleActive(1, 'from-right')}>NEXT</button> </div>CSS:
.card-from-right { ... left: 35%; transition: left 800ms 0ms ease-out, height 0ms 800ms, opacity 400ms 0ms ease-in; } .card-from-left { ... left: 25%; transition: left 800ms 0ms ease-out, height 0ms 800ms, opacity 400ms 0ms ease-in; } .card-active { ... left: 30%; }Probé async/await en la función handleActive() y useEffect , pero lo único que funciona es setTimeout (pero eso es demasiado complicado)
const handleActive = async (num, text) => { await setDirection(text) await setActive(num) } const handleActive = async (num, text) => { await setDirection(text) setTimeout(() => { setActive(num) }, 600); }¿Cómo podría pausar (y modificar el DOM?) para actualizar los nombres de clase antes de ejecutar setActive() ? Console.log y el código fuente muestran los classNames correctos, pero de alguna manera no a tiempo antes de setActive() ...
Esta es una idea aproximada de usar useEffect. También puede usar num como una dependencia si lo necesita. O podrías usar funciones. Mi punto principal sería poner la mayor parte, si no toda, la lógica condicional dentro de useEffect. (o al menos abstraerse de useEffect)
useEffect(() => { if (direction === "to-left") { setActive(-1) } else { setActive(1) } }, [direction]);Pude resolver el problema con una "variable de marcador de posición": activeSetter (el problema con la solución useEffect anterior era que no se activaba si la dirección no cambiaba). Ahora todo sucede en el orden correcto:
const [activeSetter, setActiveSetter] = useState(1) useEffect(() => { setActive(activeSetter) }, [setActive, activeSetter]) const handleActive = (num, text) => { setDirection(text) setActiveSetter(num) }