Todos los eventos del artículo : onMouseMove, onMouseDown, etc. se ejecutan correctamente. Pero onClick no. Puedo ver el botón, pero al hacer clic en él no sucede nada.
const onDelete = () => { console.log('delete') }; return ( <> {show && <Ul style={{top: pos.y, left: pos.x}}> <Li> <Button onClick={onDelete}> <Trash /> Delete </Button> </Li> </Ul> } <Article ref={ref} onContextMenu={onRightClick} onMouseMove={onMouseMove} onMouseDown={onMouseDown} onMouseUp={onMouseUp} onMouseLeave={onMouseLeave} > {children} </Article> </> );Si muevo el código entre paréntesis al interior del artículo, onClick se dispara pero el estilo de UL no funciona correctamente. Tengo otros componentes que ejecutan eventos correctamente entre paréntesis. Pero, por alguna razón, este componente solo ejecuta los eventos del artículo .
Encontré la respuesta. Tenía otra función que cierra ese botón cuando hago clic fuera del botón (usando ref). Pero cuando hice clic en el botón, esa función se activó porque estaba usando la misma referencia. ¡Solo tuve que usar otra referencia y funcionó!
useClickOutside(ref2, () => setShow(false)); const onDelete = () => { console.log("delete"); }; return ( <> {show && <Ul style={{top: pos.y, left: pos.x}}> <Li> <Button ref={ref2} onClick={onDelete}> <Trash /> Delete </Button> </Li> </Ul> } <Article ref={ref} onContextMenu={onRightClick} onMouseMove={onMouseMove} onMouseDown={onMouseDown} onMouseUp={onMouseUp} onMouseLeave={onMouseLeave} > {children} </Article> </> );Prueba esto:
onClick={() => onDelete()}