0

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.

2
  • Haz la clase del contenedor una variable dentro del estado. Similar a como lo haces con const [noteText, setNoteText] = useState('');. De esta forma cuando actualices dicho estado, se hará nuevamente el render y la clase cambiará.
    – Jacobo
    Commented el 5 jul. 2022 a las 17:00
  • No lo he entendido muy bien perdona, el contenedor tendrá o no la clase en función del click que hagamos, si hago 2 clicks sin cambiar nada, solo se renderiza 1 vez. Commented el 5 jul. 2022 a las 17:40

2 respuestas 2

0

Lo que tienes que hacer es utilizar una variable de estado que usarás como el valor de la clase de tu div.

const AddNote = ({ handleAddNote }) => {

    const [noteText, setNoteText] = useState('');
    const [classState, setClassState] = useState('note new');

    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')
            }
            let cS = classState;
            if (cS.includes('shake-right')) {
                setClassState('note new');
            }
        } else {
            setClassState('note new shake-right');
        }
    }

    return (
        <div className={classState}>
            <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;

De esta forma, usas una variable de estado para darle un valor de clase a tu div.

Hice un pequeño ejemplo en CodeSanbox para que veas como funciona esto. https://codesandbox.io/s/pedantic-brown-vh9gtg?file=/src/App.js:87-144

En mi ejemplo, cambio el color de un div al hacer click en un botón. Esto sucede al actualizar una variable de estado, de la misma forma en la que te sugiero hacer en tu código.

1
  • Hola que tal, gracias por tu tiempo, he podido comprender el código pero lo he probado y ocurre igual, funciona la primera vez, pero al volver a hacer click ya no se ejecuta la animación de la clase. Commented el 5 jul. 2022 a las 19:47
0

se me ha ocurrido esta genialidad / chapucilla, me gustaría saber que opináis, desde luego me soluciona el tema, pero no sé en temas de rendimiento/performance si puede darme problemas, bugs, etc a futuros.

const AddNote = ({ handleAddNote }) => {
    const [noteText, setNoteText] = useState('');
    const [classState, setClassState] = useState('note new');
    const handleChange = (event) => {
        if (limiteLetras - event.target.value.length >= 0){ 
            setNoteText(event.target.value);
        }
    }
    
    const handleClick = () => {
        if (noteText.trim().length > 0){
            handleAddNote(noteText)
            setNoteText('');
            
        }
        else{
            setClassState('note new shake-right')
            setTimeout(()=>{
                setClassState('note new')
            },500)
        }
    }
    return (
        <div className={classState}>
            <textarea 
                id="" 
                cols="10" 
                rows="8"
                placeholder='¿Qué has aprendido hoy?'
                value={noteText}
                onChange={handleChange}>
            </textarea>
            <div className='note-footer'>
                <small>{limiteLetras - noteText.length} Remaining</small>
                <button className='save' onClick={handleClick}>Guardar</button>
            </div>
        </div>
    )
}
export default AddNote;

La clase shake-right es la que contiene la animación, al renderizarse el componente se le aplica y viendo las condiciones, se le aplica o no esa clase, una vez se le aplica, salta la animación. Como me estaba funcionando solo 1 vez, y hasta que no se volviese a renderizar no se podía volver a aplicar la clase, se me ha ocurrido meterlo en un setTimeout

  1. Primero pone la clase si el usuario ha hecho click y no hay nada escrito.
  2. Segundo, en un timeout que dura nada, se le quita dicha clase, de esta forma cuando el usuario vuelva a dar click, se volverá a poner la clase de la animación, y tras unos segundos se volverá a quitar, y así en bucle hasta que el usuario decida poner algo en el textarea.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.