重叠式广告无法输入xlsx电子表格

问题描述

我创建了一个codesandbox来说明这一点。
基本上发生的是无法单击XLSX电子表格单元格，因为覆盖透明框阻止了此操作。我知道为什么会发生这种情况，可以通过设置样式pointer-events: none;来解决它，但是叠加层停止工作，因为当鼠标移动时它会滑出。

带有绿色按钮的叠加层可以滑入和滑出，并且捕捉到该叠加层的鼠标移动的“框”阻止了点击进入下面的电子表格。

我该如何解决，以便可以编辑电子表格中的所有单元格，并使覆盖层仍然有效？有没有办法制作这样的覆盖层，让它可以点击并响应鼠标事件？

解决方法

不幸的是，似乎无法实现将Overlay作为要叠加的元素的同级对象，但是如果允许更改将XLSX组件作为叠加子元素的结构，则可以实现

Overlay.js

class Overlay extends Component {
  constructor(props) {
    super(props);
    this.state = {
      hoverIndex: null
    };
  }

  handleMouseEnter = (e) => {
    if (e.currentTarget.id) {
      this.setState({ hoverIndex: e.currentTarget.id });
    }
  };

  handleMouseLeave = (e) => {
    this.setState({ hoverIndex: null });
  };

  render() {
    const { fileData,children } = this.props;
    const { hoverIndex } = this.state;
    return (
      <div
        onMouseEnter={this.handleMouseEnter}
        onMouseLeave={this.handleMouseLeave}
        className={`box-container`}
        id={fileData}
        key={fileData}
      >
        <div
          onMouseLeave={this.handleMouseLeave}
          className={`box-content ${hoverIndex === fileData ? "hovered" : ""}`}
        >
          <div className="text-group">SpreadSheet File</div>

          <div className="btn-group">
            <button className="btn btn-secondary" type="button">
              Open File
            </button>
            <button className="btn btn-secondary" type="button">
              Edit Description
            </button>
            <button className="btn btn-secondary" type="button">
              Download
            </button>
            <button className="btn btn-secondary" type="button">
              Push me for fun
            </button>
          </div>
        </div>

        {children}
      </div>
    );
  }
}

overlay-xlsx-renderer.scss

.box-container {
  width: 100%;
  height: 100%;
  margin: 0% auto;
  overflow: hidden;
  position: relative;
}

.box-content {
  width: 60%;
  height: 100%;
  background: #1d1d1e;
  position: absolute;
  left: -60%;
  transition: left 0.6s;
  color: white;
  overflow: auto;
  z-index: 10;
}

ItemRendered.js

    ...
      case "xlsx": {
        return (
          <div className="outer">
            <Overlay fileData={fileData}>
              <div className="pg-viewer-wrapper">
                <div className="pg-viewer" id="pg-viewer">
                  <XlsxViewer
                    responseType="arraybuffer"
                    filePath={filePath}
                    width={0}
                    height={0}
                  />
                </div>
              </div>
            </Overlay>
          </div>
        );
      }
    ...

您可以检查它是否在此sandbox fork

中正常工作