Reactでフローティングメニューを実装する方法

フローティング メニューを実装するための React メソッド: 1. onMouseOver と onMouseLeave を使用してマウスの変化を監視します; 2. スタイル内の親クラスとサブクラスの位置の値を設定します; 3. 親クラスの値を相対に設定します。子クラスの値を相対にクラス値を絶対とし、メニューのcssに「z-index:999;」を追加; 4. 表示を制御して表示を制御します。

このチュートリアルの動作環境: Windows 10 システム、react18.0.0 バージョン、Dell G3 コンピューター。

#React でフローティング メニューを実装するにはどうすればよいですか?

React でフローティング メニューをホバーする方法

フローティング メニューの場合、主に HTML タグまたはホバーします。最初に効果を見てみましょう。画像:

マウスを名前の上に置くとメニューがポップアップし、マウスを離れるとメニューが表示されます。消えます。

1. まず、イベント メカニズムの使用方法について説明します:

イベント メカニズムでは、主に次のように、マウスのいくつかのイベントを監視に使用します:

onMouseOver (マウスの Enter)、onMouseLeave (マウスの終了) を使用してマウスの変化を監視できます

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

同時に、スタイル内の親クラスとサブクラスの位置の値を設定する必要があります。値は相対、サブクラスの値は絶対、同時にフローティングメニューをフロントエンドに表示する用途にはメニューのCSSにz-index:999;を追加する必要があります（大きいほど値、フロントエンドに近いほど、最大値 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. hover で判断する場合は、css に親クラスを追加する必要があります: hover . subclass {}、このスタイル、および

親コンポーネント スタイルの名前が A、子コンポーネント スタイルの名前が B の場合、次のように記述する必要があります: A:hover .B{display: 'block'}、制御する

推奨される学習: "

react ビデオ チュートリアル "

以上がReactでフローティングメニューを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。