覆盖阻止输入 xlsx 电子表格如何解决我的问题

Question

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

带有绿色按钮的叠加层会滑入和滑出，捕捉叠加层鼠标移动的“框”会阻止点击进入下方的电子表格。

我该如何解决才能编辑电子表格中的所有单元格，同时让叠加层仍然有效？有没有办法制作这样的叠加层，让点击通过并对鼠标事件做出反应？

Answer 1

不幸的是，似乎不可能实现将覆盖层作为您要覆盖的元素的同级元素，但如果您被允许更改将 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

中检查它是否正常工作

覆盖阻止输入 xlsx 电子表格如何解决我的问题

Overlay is blocking input to xlsx spreadsheet how to fix that in my case

onmousemove

reactjs