Cliquez sur l'événement sur un composant empilé

Question

J'ai deux composants de fonction de flèche réactive empilés l'un sur l'autre (en utilisant un positionnement absolu) et ils ont tous deux des propriétés onClick. Le problème est que je veux cliquer sur celle du haut et que les deux fonctions onClick se déclenchent. Existe-t-il un moyen de résoudre ce problème ?

Ceci est une version simplifiée du code :

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>
        </>
    )
}

La capture d'écran ci-dessous illustre pourquoi je souhaite empiler deux composants :

• Avant de survoler :
• Après le survol :

Je souhaite qu'un bouton apparaisse lorsque la souris passe au-dessus du composant Papier. Le problème est que chaque fois que je clique sur le bouton, expandCard 和 buttonAction se déclenche. (BTW, j'utilise Material UI)

Answer 1

Vous pouvez utiliser $event.stopPropagation();.

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

Donc dans votre cas, vous devez changer la fonction buttonAction en ceci

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

et clause de retour

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

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

Vous pouvez en savoir plus ici