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.
Sé que este es un tema antiguo y la pregunta es muy antigua, pero tal vez sea útil para alguien. 🤷♂️
const handleExpand = (e: any):void => { if (containerRef.current.contains(e.target)) { setIsExpanded(true) } } 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.
Compruebe si la referencia al objeto (devuelto por e.target ) está contenida dentro del nodo useRef.current .