React의 컨텍스트 메뉴

상황에 맞는 메뉴는 마우스 오른쪽 버튼을 클릭하면 열리고 옵션 목록이 표시되는 일종의 바로 가기 메뉴입니다. 마찬가지로 반응 애플리케이션에서 마우스 오른쪽 버튼을 클릭하면 메뉴가 생성됩니다.

React에서 오른쪽 클릭 메뉴 만들기

class ContextMenu extends React.Component {

    state = {
        visible: false,
    };

    componentDidMount() {
        document.addEventListener('contextmenu', this._handleContextMenu);
        document.addEventListener('click', this._handleClick);
        document.addEventListener('scroll', this._handleScroll);
    };

    componentWillUnmount() {
      document.removeEventListener('contextmenu', this._handleContextMenu);
      document.removeEventListener('click', this._handleClick);
      document.removeEventListener('scroll', this._handleScroll);
    }

    _handleContextMenu = (event) => {
        event.preventDefault();

        this.setState({ visible: true });

        const clickX = event.clientX;
        const clickY = event.clientY;
        const screenW = window.innerWidth;
        const screenH = window.innerHeight;
        const rootW = this.root.offsetWidth;
        const rootH = this.root.offsetHeight;

        const right = (screenW - clickX) > rootW;
        const left = !right;
        const top = (screenH - clickY) > rootH;
        const bottom = !top;

        if (right) {
            this.root.style.left = `${clickX + 5}px`;
        }

        if (left) {
            this.root.style.left = `${clickX - rootW - 5}px`;
        }

        if (top) {
            this.root.style.top = `${clickY + 5}px`;
        }

        if (bottom) {
            this.root.style.top = `${clickY - rootH - 5}px`;
        }
    };

    _handleClick = (event) => {
        const { visible } = this.state;
        const wasOutside = !(event.target.contains === this.root);

        if (wasOutside && visible) this.setState({ visible: false, });
    };

    _handleScroll = () => {
        const { visible } = this.state;

        if (visible) this.setState({ visible: false, });
    };

    render() {
        const { visible } = this.state;

        return(visible || null) && 
            <div ref={ref => {this.root = ref}} className="contextMenu">
                <div className="contextMenu--option">React Tutorials</div>               
                <div className="contextMenu--option">PHP Tutorials</div>
                <div className="contextMenu--separator" />
                <div className="contextMenu--option">All Tutorials</div>
            </div>
    };
}

React의 컨텍스트 메뉴 CSS

이제 이 SCSS 또는 CSS를 .scss 파일에 추가하여 반응하는 상황에 맞는 메뉴의 스타일을 지정하세요.

.contextMenu {
    position: fixed;
    background: white;
    box-shadow: 0px 2px 10px #999999;

    &--option {
        padding: 6px 50px 5px 10px;
        min-width: 160px;
        cursor: default;
        font-size: 12px;
        &:hover {
            background: linear-gradient(to top, #555, #333);
            color: white;
        }

        &:active {
            color: #e9e9e9;
            background: linear-gradient(to top, #555, #444);
        }

        &__disabled {
            color: #999999;
            pointer-events: none;
        }
    }

    &--separator {
        width: 100%;
        height: 1px;
        background: #CCCCCC;
        margin: 0 0 0 0;
    }
}

이제 Component 가 있고 클래스 또는 기능적 구성 요소로 가져오기만 하면 응용 프로그램 어디에서나 사용할 수 있습니다.


구독 좋아요 공유와 긍정적인 피드백을 보내주세요.

더 많은 자습서를 보려면 visit my website .

감사:)
행복한 코딩 :)