반응으로 플로팅 메뉴를 구현하는 방법

반응에서 부동 메뉴를 구현하는 방법: 1. onMouseOver 및 onMouseLeave를 사용하여 마우스 변경 사항을 모니터링합니다. 2. 스타일에서 상위 클래스와 하위 클래스의 위치 값을 설정합니다. 3. 상위 클래스 값을 상대 클래스와 하위 클래스로 설정합니다. 값을 절대값으로 설정하고 메뉴 CSS에 "z-index:999;"를 추가합니다. 4. 디스플레이를 제어하여 디스플레이를 제어합니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 18.0.0, Dell G3 컴퓨터.

반응에서 플로팅 메뉴를 구현하는 방법은 무엇입니까?

React에서 플로팅 메뉴에 마우스를 올리는 방법

플로팅 메뉴의 경우 주로 html 태그의 이벤트 메커니즘을 사용하여 구현되거나 마우스 오버를 먼저 살펴보겠습니다.

이름 위에 마우스를 올리면 메뉴가 뜨고 나가면 메뉴가 사라집니다.

1 먼저 이벤트 메커니즘을 사용하는 방법에 대해 이야기하겠습니다.

이벤트 메커니즘에서는 다음과 같이 마우스의 일부 이벤트를 주로 모니터링하는 데 사용합니다.

onMouseOver(마우스 입력) 및 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)

.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로 판단되는 경우 상위 클래스인 hover .subclass {}를 CSS에 추가한 다음 표시 여부를 제어해야 합니다. ,

상위 구성 요소 스타일의 이름이 A이고 하위 구성 요소 스타일의 이름이 B인 경우 다음과 같이 작성해야 합니다. A:hover .B{display:'block'},

권장 학습: "react 동영상 튜토리얼》

위 내용은 반응으로 플로팅 메뉴를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!