Preface

Dropdown drop-down menu

import

import Dropdown from '@/components/Dropdown/Dropdown'

The use of subcomponents is as follows:
const MenuItem = Dropdown.MenuItem;
const SubMenu = Dropdown.SubMenu;

Props

1. trigger

• Type: string (required)
• default: click | hover
• description: drop-down trigger mode, click click trigger menu, hover trigger menu

2. onClickMenu

• Type: func
• default value: no
• description: click to trigger the callback function to change the classname of the sub-component. Input parameters:
  • {string} trigger drop-down trigger mode

3. title

• Type: string
• default value: no
• description: drop-down button prompts for title

MenuItem child content components

import

import Dropdown from '@/components/Dropdown/Dropdown';

Props

1. trigger

• Type: string (required)
• default: click | hover
• description: drop-down trigger mode, click click trigger menu, hover trigger menu

2. className

• Type: string (required)
• default: click | hover
• description: class:'dropdownType-click' of the outer div of the sub-content | 'dropdownType-hover'

3. disabled

• Type: bool
• default value: false
• Note: the sub-content of the drop-down is grayed out, true is grayed out, false is normal

4. onClickMenuItem

• Type: func (required)
• default value: no
• description: click on a single sub-content to perform the action. Input parameters:
  • {string | number} value | some item selected by key

parent of SubMenu child content

import

import Dropdown from '@/components/Dropdown/Dropdown';

Props

1. trigger

• Type: string (required)
• default: click | hover
• description: drop-down trigger mode, click click trigger menu, hover trigger menu

2. className

• Type: string (required)
• default: click | hover
• description: class:'dropdownType-click' of the outer div of the sub-content | 'dropdownType-hover'

4. title

• Type: string
• default value: no
• description: drop-down button prompts for title

Let's implement dropdown.js

import React from 'react';
import PropTypes from 'prop-types';
import './dropdown.scss';

/ * *
* description of attributes passed by Dropdown components
* trigger pull-down trigger (string) click hover
* onClickMenu Click to replace classname (funtion)
* name of the title drop-down menu (string)
, /
class Dropdown extends React.Component {

    // check the type of input parameter
    static propTypes = {
        // the drop-down trigger mode can be one of the values.
        trigger: PropTypes.oneOf(['click', 'hover']),
        // Click the drop-down to change classname to change the style of func.
        onClickMenu: PropTypes.func,
        // the drop-down mode value is right-click.
        contextMenu: PropTypes.string,
        // drop-down button text
        title: PropTypes.string,
    }

    constructor(props) {
        super(props);
        this.checkboxWrapper = React.createRef();
        this.state = {
            trigger : props.trigger,
            // clickX: null,
            visible:false,// right-click the identification switch to control the mouse
            flag:false,// manipulate the mouse click recognition switch
        }
    }

    componentDidMount() {
        document.addEventListener('click', this.hideAllMenu);
    }

    hideAllMenu = ()=>{
        this.setState({flag : false });
    }

    showMenu(e){
        let trigger = this.props.trigger;
        e.nativeEvent.stopImmediatePropagation();
        // e.stopPropagation(); 
        console.log('>>>>', e)
        this.setState({flag : !this.state.flag });
        
        this.props.onClickMenu(this.state.trigger);// the classname of linked MenuItem must go because classname wants to pass a value
    }
    render(){
        return (
            <div ref={this.checkboxWrapper} className={'dropdown-box '+this.props.trigger}
                 onClick={(e)=>{this.props.trigger == 'click' && this.showMenu(e)}}
            >{this.state.flag}
                <div className="drop-title">{this.props.title}
                    <i className="icon icon-shangjiantou mouseEnter" />
                    <i className="icon icon-xiajiantou mouseLeave" />
                    <i className={"icon " + (this.state.flag ? "icon-shangjiantou" : "icon-xiajiantou")} />
                </div>
                <div ref={'testDiv'} className="drop-cont">
                    {this.props.contextMenu ? (this.state.visible && this.props.children) : (
                        this.props.trigger == 'click' ? (this.state.flag && this.props.children) : this.props.children)}
                </div>
            </div>
        )
    }
}

/ * *
* description of attributes passed by MenuItem components
* trigger pull-down trigger (string) click hover
* className Joint Click to replace classname (string)
* disabled gray status true: grey false: normal
* onClickMenuItem clicks on a single item to perform an action (funtion)
, /
class  MenuItem extends  React.Component{

    // check the type of input parameter
    static propTypes = {
        // the drop-down trigger mode can be one of the values.
        trigger: PropTypes.oneOf(['click', 'hover']),
        // Click to change classname required
        className: PropTypes.string.isRequired,
        // A drop-down item of gray true: grey false: normal
        disabled: PropTypes.bool,
        // Click a single item to perform the action
        onClickMenuItem: PropTypes.func,
    }

    constructor(props) {
        super(props);
        this.state = {
            flag:true
        };
    }
    menuAction(){
        this.props.onClickMenuItem && this.props.onClickMenuItem();
    }
    render(){
        return(
           <div className={'menuItem dropdownType-' + (this.props.trigger == 'hover' ? this.props.trigger : this.props.className) +
           ' '+ (this.props.disabled ? 'disabled' : '')}
                onClick={(e)=>{this.menuAction(e)}}>
               {this.props.children}
           </div>
        )
    }
}

/ * *
* description of attributes passed by SubMenu components
* the parent name of the title with multiple levels of items (string)
* Click to replace classname (string) when className is linked by the parent.
* trigger pull-down trigger (string) click hover
, /
class  SubMenu extends  React.Component{

    // check the type of input parameter
    static propTypes = {
        // the drop-down trigger mode can be one of the values.
        trigger: PropTypes.oneOf(['click', 'hover']),
        // Click to change classname required
        className: PropTypes.string.isRequired,
        // drop-down button text
        title: PropTypes.string,
    }

    constructor(props) {
        super(props);
        this.state = {
        };
    }
    render(){
        return(
            <div className={'submenu dropdownType-' + (this.props.trigger == 'hover' ? this.props.trigger : this.props.className)}>
                {this.props.title}
                <i className="icon icon-youjiantou"></i>
                <div className={'submenuItem-box'}>
                    {this.props.children}
                </div>
            </div>
        )
    }
}

Dropdown.MenuItem = MenuItem;
Dropdown.SubMenu = SubMenu;

export default Dropdown;

style will not be pasted here

"Welcome to discuss in the comments section"