ReactJS -在不禁用点击事件的情况下，为移动设备的上下文菜单禁用单击并保持？

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showContextMenu: false
    };
  }

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

  componentWillUnmount() {
    document.removeEventListener('click', this.hideContextMenu);
  }

  showContextMenu = (event) => {
    event.preventDefault();
    this.setState({ showContextMenu: true });
  }

  hideContextMenu = () => {
    this.setState({ showContextMenu: false });
  }

  render() {
    return (
      <div>
        <button onContextMenu={this.showContextMenu}>Right-click me</button>
        {this.state.showContextMenu && (
          <div className="context-menu">
            {/* 上下文菜单内容 */}
          </div>
        )}
      </div>
    );
  }
}

export default MyComponent;