Klik acara pada komponen bertindan

Question

Saya mempunyai dua komponen fungsi anak panah reaktif yang disusun di atas satu sama lain (menggunakan kedudukan mutlak) dan kedua-duanya mempunyai sifat onClick. Masalahnya ialah, saya ingin mengklik bahagian atas dan kedua-dua fungsi onClick menyala. Adakah terdapat cara untuk menyelesaikan masalah ini?

Ini ialah versi ringkas kod:

const Card = ({...}) => {

    const styles = {
        optionsButton: {
            minWidth:0,
            minHeight: 0,
            padding: "2px",
            position: "absolute",
            color: "#808080",
            zIndex: 1,
            right: 5,
            top: 5,
            '&:hover':{
                backgroundColor: 'rgb(0, 0, 0, 0.1)'
            }
        },
    }

    const [hovering, setHovering] = useState(false)
    const [isCardExpanded, setIsCardExpanded] = useState(false)

    const expandCard = () => {
        setIsCardExpanded(true)
    }
    const closeCard = () => {
        setIsCardExpanded(false)
    }


    const mainPaperStyle = () => {
        let style = {
            padding: "10px",
            cursor: "pointer",
            position: "absolute",
            "&:hover": {
                filter: "brightness(97%)"
            }
        }

        //Extra code here modifying color of the style, no positioning modifications

        return style
    }

    const buttonAction = () => {
        console.log("Do action!")
    }

    return(
        <>
            <Paper sx={mainPaperStyle()} onClick={expandCard} onMouseEnter={() => setHovering(true)} onMouseLeave={() => setHovering(false)}>
                Lorem Ipsum

                {hovering &&
                    <Button variant="filled"
                            id="card-button"
                            sx={styles.optionsButton}
                            onClick={() => buttonAction()}>
                        <MoreVertIcon/>
                    </Button>
                }
            </Paper>
        </>
    )
}

Tangkapan skrin di bawah menggambarkan sebab saya ingin menyusun dua komponen bersama:

• Sebelum melayang:
• Selepas melayang:

Saya mahu butang muncul apabila tetikus dilegar di bahagian atas komponen Kertas. Masalahnya ialah apabila saya mengklik butang, expandCard 和 buttonAction menyala. (BTW, saya menggunakan UI Bahan)

Answer 1

Boleh guna $event.stopPropagation();.

const firstFn = () => { // first function body };
const secondFn = (event: MouseEventHandler) => { 
    $event.stopPropagation();
    // second function body
}

Jadi dalam kes anda, anda perlu menukar fungsi buttonAction kepada ini

const buttonAction = (event) => {
    $event.stopPropagation();
    console.log("Do action!")
}

dan fasal balik

return(
        
             setHovering(true)} onMouseLeave={() => setHovering(false)}>
                Lorem Ipsum

                {hovering &&
                     buttonAction($event)}>
                        
                    
                }
            
        >
    )

Anda boleh mengetahui lebih lanjut di sini