Hola que tal estoy probando por varios medios el agregar una clase 'shake-right'
en react, a un contenedor, cada vez que escucha el evento onClick pasado por props, de un botón button
La clase lo único que hace es una animación para el contenedor padre, éste es su css:
.shake-right{animation:shake-right 0.4s linear both}
@keyframes shake-right{
0%,100%{
transform:rotate(0deg);transform-origin:100% 50%
}
10%{
transform:rotate(2deg)
}
20%,40%,60%{
transform:rotate(-4deg)
}
30%,50%,70%{
transform:rotate(4deg)
}
80%{
transform:rotate(-2deg)
}
90%{
transform:rotate(2deg)
}
}
La clase shake-right
sólo debe colocarse en el contenedor, si el usuario al hacer click en un button
que tiene ese mismo contenedor, éste no tiene nada de texto en un textarea
.
En caso de tener texto al darle al button
y lanzar el evento onClick, no se debe poner agregar la clase shake-right
Estoy probando por medio de useEffect
ejecutar una función que mire si al hacer click hay texto o no en el textarea, pero no me termina de funcionar con el hook o no lo estoy planteando bien.
He probado otra solución que funciona bien, pero únicamente 1 vez, es decir, si no escribo nada, y doy click en el button
, funciona, pero si vuelvo a dar click con el textarea
vacío ya no funciona, y esto ocurre porque el componente no está rerenderizando.
En caso de que escriba algo, de click, y luego vuelva a dar click con el texto vacío, al haberse renderizado sí vuelve a funcionar.
Tengo que buscar una forma de renderizar el componente cada vez que escuche el click, independientemente de que haya o no texto.
Para hacer lo que os comento que me funciona 1 vez este es mi código:
const AddNote = ({ handleAddNote }) => {
const [noteText, setNoteText] = useState('');
const handleChange = (event) => {
setNoteText(event.target.value);
}
const handleClick = () => {
if (noteText.trim().length > 0){
handleAddNote(noteText)
if (document.querySelector('.new').classList.contains('shake-right')){
document.querySelector('.new').classList.remove('shake-right')
}
}
else{
document.querySelector('.new').classList.add('shake-right');
}
}
return (
<div className='note new'>
<textarea
id=""
cols="10"
rows="8"
placeholder='¿Qué has aprendido hoy?'
value={noteText}
onChange={handleChange}>
</textarea>
<div className='note-footer'>
<small>200 Remaining</small>
<button className='save' onClick={handleClick}>Guardar</button>
</div>
</div>
)
}
export default AddNote;
Fijaros como la función handleClick primero comprueba que haya texto, entonces actualiza el prop que se le pasa. Y luego mira que si existe la clase shake-right la elimine, finalmente si al hacer click no hay nada, se iría al else
y en este caso se añadiría la clase.
Si se os ocurre algo agradezco la ayuda muchas gracias de antemano.
const [noteText, setNoteText] = useState('');
. De esta forma cuando actualices dicho estado, se hará nuevamente elrender
y la clase cambiará.