Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

180
Views
useRef actual y el destino del evento de clic no son iguales aunque deberían serlo

Tengo un elemento div al que quiero llamar una función cuando se activa un evento de clic. El div contiene un campo de entrada que no quiero activar la función, por lo que estoy usando useRef para apuntar solo al elemento div en sí y no al contenido. Estoy creando la referencia con el gancho, le doy al div un atributo de referencia que apunta a esa referencia y luego le paso un evento onClick que primero verifica si ref.current es igual al objetivo del evento. Este método me ha funcionado en el pasado cuando construía funciones como modales, pero por alguna razón, esta vez el valor de ref.current y el valor del objetivo del evento no se evalúan como iguales, por lo que la función nunca se activa. Aquí está el código:

 const VideoEntryTile: React.FC = () => { const [isExpanded, setIsExpanded] = useState<boolean>(false); const containerRef = useRef<HTMLDivElement | null>(null) const handleExpand = (e: any):void => { console.log(containerRef === e.target) // This evaluates to false if (containerRef.current === e.target) { setIsExpanded(true) } } return ( <div className={styles.VideoEntryTile__Container} onClick={handleExpand} ref={containerRef} {/* The reference is set here */} > <div className={styles.VideoEntryTile__Top}> <div className={styles.VideoEntryTile__LeftActions}> <div className={styles.VideoEntryTile__LeftActions__VideoNameInput}> <TextField disabled={false} inputSize="large" value="Video 1" /> </div> <div className={styles.VideoEntryTile__LeftActions__GuestsContainer}> <p>Guests</p> <input /> </div> <button type="button">-</button> <button type="button">+</button> </div> <div className={styles.VideoEntryTile__RightActions}> <p>20</p> <p>Credits</p> </div> </div> { isExpanded ? ( <div className={styles.VideoEntryTile__Bottom}> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> </div> ) : null } </div> ); };

¿Alguna idea de por qué esto no funciona? Esta solución me ha funcionado en el pasado, así que no estoy seguro de por qué no funciona ahora.

E: Este hilo no debería haberse cerrado; la "respuesta" provista no tiene nada que ver con mi pregunta.

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Sé que este es un tema antiguo y la pregunta es muy antigua, pero tal vez sea útil para alguien. 🤷‍♂️

Código:

 const handleExpand = (e: any):void => { if (containerRef.current.contains(e.target)) { setIsExpanded(true) } }

Problema:

En su caso, useRef está devolviendo la corriente como un Object . Al comparar el e.target que es una referencia al objeto en el que se envió el evento, y un Objeto, la comparación nunca será igual.

Solución:

Compruebe si la referencia al objeto (devuelto por e.target ) está contenida dentro del nodo useRef.current .

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!