So implementieren Sie ein schwebendes Menü in React

So implementieren Sie ein schwebendes Menü in React: 1. Verwenden Sie onMouseOver und onMouseLeave, um Mausänderungen zu überwachen. 2. Legen Sie den Positionswert der übergeordneten Klasse und der Unterklasse im Stil fest value auf absolute und fügen Sie „z-index:999;“ zum CSS des Menüs hinzu. 4. Steuern Sie die Anzeige, indem Sie die Anzeige steuern.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 18.0.0, Dell G3-Computer.

Wie implementiert man ein schwebendes Menü in React?

So bewegen Sie den Mauszeiger über das schwebende Menü in React

Für das schwebende Menü wird es hauptsächlich mithilfe des Ereignismechanismus des HTML-Tags implementiert, oder wir werfen zunächst einen Blick auf das Rendering:

Wenn Sie die Maus auf den Namen bewegen, wird das Menü angezeigt. Wenn Sie es verlassen, verschwindet das Menü.

1. Lassen Sie uns zunächst über die Verwendung des Ereignismechanismus sprechen:

Im Ereignismechanismus werden einige Ereignisse der Maus hauptsächlich zur Überwachung verwendet, wie folgt:

Sie können onMouseOver (Maus betritt) und onMouseLeave (Maus) verwenden Blätter), um die Maus zu überwachen. Gleichzeitig müssen Sie die Positionswerte der übergeordneten Klasse und der Unterklasse im Stil festlegen. Der Wert der übergeordneten Klasse ist relativ und der Wert der Unterklasse ist absolut . Um das schwebende Menü am Frontend anzuzeigen, muss gleichzeitig der Z-Index zum CSS des Menüs hinzugefügt werden (Je größer der Wert, desto näher am Frontend). Maximaler Wert von 999)

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

2. Wenn es per Hover beurteilt wird, müssen Sie die übergeordnete Klasse hinzufügen: hover , diesen Stil zum CSS, und steuern Sie dann die Anzeige darin, um zu steuern, ob es angezeigt werden soll oder nicht ,

Wenn der Stil der übergeordneten Komponente A und der Stil der untergeordneten Komponente B heißt, müssen Sie Folgendes schreiben: A:hover .B{display:'block'}, um zu steuern

Empfohlenes Lernen: „

reagieren Video-Tutorial

》

Das obige ist der detaillierte Inhalt vonSo implementieren Sie ein schwebendes Menü in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!