reactjs - React Indiana 拖动滚动组件干扰 Ant Design 弹出框

问题描述

我正在尝试在 react-indiana-drag-scroll 组件中实现 Ant Design 弹出框。当用户单击它们时，我需要将弹出框关闭。

当用户单击页面上的任意位置时，活动弹出框消失。但是，如果他们在滚动组件内部单击以打开另一个弹出框或尝试滚动 div，则活动弹出框不会消失。

https://codesandbox.io/s/async-frog-3mxh7

上面的代码沙盒有整个场景可以玩，如果需要我也可以粘贴代码。

使弹出窗口消失的步骤：单击表格中的“A”单元格之一 - 弹出窗口应该出现。单击名称列中的名称之一 - 弹出框将关闭

使弹出框保持不变的步骤：单击表格中的“A”单元格之一 - 弹出框应该出现。单击“A”单元格之一或尝试单击并拖动表格。- 弹出框不会消失

我认为这个问题与 ScrollContainer 处理点击事件有关，而不是让浏览器或 antd 对它做任何其他事情。

谢谢你尽你所能的帮助。

代码如下：

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Popover } from "antd";
import ScrollContainer from "react-indiana-drag-scroll";

class GridSquare extends React.Component {
  state = {
    visible: false
  };

  hide = () => {
    this.setState({
      visible: false
    });
  };

  handleVisibleChange = visible => {
    this.setState({ visible });
  };

  render() {
    const content = <div>Popup Window</div>;

    return (
      <div>
        <Popover
          content={content}
          title="Title"
          trigger="click"
          placement="right"
          visible={this.state.visible}
          onVisibleChange={this.handleVisibleChange}
        >
          <a href="none">A</a>
        </Popover>
      </div>
    );
  }
}

class App extends React.Component {
  render() {
    const data = [
      {
        Name: "Vanessa Smith",
        Things: ["One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight"]
      },
      {
        Name: "Alan Benedict",
        Things: ["One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight"]
      },
      {
        Name: "James Borton",
        Things: ["One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight"]
      },
      {
        Name: "Belinda Gong",
        Things: ["One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight"]
      },
      {
        Name: "Barry Homeowner",
        Things: ["One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight"]
      },
      {
        Name: "Cassandra Blanche",
        Things: ["One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight"]
      },
      {
        Name: "Carmel Daniels",
        Things: ["One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight"]
      },
      {
        Name: "Peter Jones",
        Things: ["One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight"]
      },
      {
        Name: "Grimswick Smith",
        Things: ["One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight"]
      },
      {
        Name: "Sanrda Martinez",
        Things: ["One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight"]
      },
      {
        Name: "Ronnie Hotdog",
        Things: ["One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight"]
      }
    ];

    return (
      <div className="outer-div-constrainer">
        <div className="attendance-floater">
          <table className="table-attendance table table-condensed">
            <thead>
              <tr>
                <th colSpan="5">Name</th>
              </tr>
            </thead>
            <tbody>
              {data.map((row, i) => (
                <tr key={i}>
                  <td>{row.Name}</td>
                  <td>0</td>
                  <td>0</td>
                  <td>0</td>
                  <td>0</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <ScrollContainer
          className="scroll-container attendance-scroller"
          hideScrollbars={false}
          nativeMobileScroll={true}
        >
          <table className="table-attendance table table-condensed">
            <thead>
              <tr>
                {data[0].Things.map((row, i) => (
                  <th key={i}>Thing</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {data.map((row, i) => (
                <tr key={i}>
                  {row.Things.map((i, j) => (
                    <td key={j}>
                      <GridSquare />
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </ScrollContainer>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("container"));

.outer-div-constrainer {
  width: 300px;
}

.attendance-scroller {
  overflow-x: scroll;
  direction: rtl;
  cursor: grab;
}
.attendance-floater {
  float: left;
}

<div id="container" style="padding: 24px"></div>

标签： reactjsantd

reactjs - React Indiana 拖动滚动组件干扰 Ant Design 弹出框

问题描述

解决方案

推荐阅读