Comment implémenter le menu flottant en réaction

Comment implémenter un menu flottant dans React : 1. Utilisez onMouseOver et onMouseLeave pour surveiller les changements de souris ; 2. Définissez la valeur de position de la classe parent et de la sous-classe dans le style 3. Définissez la valeur de la classe parent sur relative et la sous-classe ; valeur à Absolute et ajoutez "z-index:999;" au CSS du menu 4. Contrôlez l'affichage en contrôlant l'affichage.

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 18.0.0, ordinateur Dell G3.

Comment implémenter le menu flottant dans React ?

Comment survoler le menu flottant dans React

Pour le menu flottant, il est principalement implémenté à l'aide du mécanisme événementiel de la balise html, ou survoler.

Lorsque la souris est placée sur le nom, le menu apparaît, et lorsque vous quittez, le menu disparaît.

1. Parlons d'abord de la façon d'utiliser le mécanisme d'événements :

Dans le mécanisme d'événements, certains événements de la souris sont principalement utilisés pour surveiller, comme suit :

Vous pouvez utiliser onMouseOver (la souris entre) et onMouseLeave (la souris entre feuilles) pour surveiller la souris. Change

class UserMenu extends React.Component{
 
    constructor(props){
        super(props),
            this.state={
                modalIsOpen:'none',
                atUserItems:false,
            }
 
        this.contentBtn=this.contentBtn.bind(this),
        this.programBtn=this.programBtn.bind(this),
        this.handleMouseOver = this.handleMouseOver.bind(this);
        this.handleMouseOut = this.handleMouseOut.bind(this);
        this.userCenter = this.userCenter.bind(this);
        this.handleMouseUserOver = this.handleMouseUserOver.bind(this);
 
    }
 
    contentBtn(){
        this.context.router.history.push("/details");
    }
 
    programBtn(){
        this.context.router.history.push("/gui");
    }
 
    handleMouseOver(e){
        this.setState({
            modalIsOpen: 'block',
        })
    }
 
    handleMouseOut(){
 
        this.setState({
           modalIsOpen: 'none',
        })
 
    }
    handleMouseUserOver(e){
        this.setState({
            modalIsOpen: 'block',
        })
    }
 
    userCenter(){
        this.setState({
            modalIsOpen: 'none',
        })
    }
 
    render(){
        const {username} = this.props;
        return(
            <div className={styles.body} >
                <div className={styles.uname}
                     onMouseOver={this.handleMouseOver}
                     onMouseLeave={this.handleMouseOut}
                >{username}</div>
 
                <div className={styles.menus}
                     style={{display:this.state.modalIsOpen}}
                     onMouseOver={this.handleMouseUserOver}
                     onMouseLeave={this.handleMouseOut}
                >
                    <ul className={styles.ul}>
                        <li className={styles.li} onClick={this.userCenter}>个人中心</li>
                        <li className={styles.li} >账号设置</li>
                        <li className={styles.li} >注销</li>
                    </ul>
                </div>
            </div>
        )
    }
 
}
 
UserMenu.contextTypes = {
    router: PropTypes.object.isRequired
};
 
export default UserMenu

En même temps, vous devez définir les valeurs de position de la classe parent et de la sous-classe dans le style. . Dans le même temps, afin que le menu flottant s'affiche au front-end, z-index doit être ajouté au CSS du menu (plus la valeur est grande, plus le front-end est proche. valeur maximale de 999)

.body{
    position:relative
}
.menus{
    display:none;
    position:absolute;
    right: 0;
    z-index:999;
}
 
.uname{
    color: white;
    margin-left: 5px;
    margin-right: 10px;
    cursor: pointer;
    padding-top: 25px;
    padding-bottom: 20px;
    padding-left: 5px;
}
.uname:hover{
    color: darkorange;
}
.ul{
    width: 120px;
    background-color: #fff;
    padding: 10px;
    border-radius: 8px;
    -webkit-box-shadow: 0 5px 10px 0 rgba(12,40,46,0.20);
    box-shadow: 0 5px 10px 0 rgba(12,40,46,0.20);
}
.li{
    list-style: none;
    height: 40px;
    display: list-item;
    cursor: pointer;
}
.li:hover{
    color: darkorange;
}

2. S'il est jugé par survol, vous devez ajouter la classe parent : hover , sous-classe {}, ce style au CSS, puis contrôler l'affichage pour contrôler s'il faut afficher ou non. ,

Si le style du composant parent s'appelle A et le style du composant enfant est nommé B, vous devez écrire comme ceci : A:hover .B{display:'block'}, pour contrôler

Apprentissage recommandé : "

réagir Tutoriel vidéo

》

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!