React/TypeScript - React-grid-layout：单击 <div>

Question

我正在尝试使用react-layout-grid组件构建一个具有可点击和可拖动itens的网格。 但是，当我单击该项目时，拖动会立即激活，而无需实际移动光标。

有人可以帮助我实现它吗？这是我的代码：

render() {
    return (
        <div className="gridL" style={{minHeight: '65px'}}>
          <StarIcon style={{ position: 'absolute', fontSize: 26, marginTop: 20, marginLeft: '5px', color: 'orange'}} />
          {this.props.favoritesData == null || 
          this.props.favoritesData.length == 0 && 
          (
              <div style={{ position: 'absolute', marginLeft: '35px', marginTop: '24px', height: '30px', color: 'gray'}}>
                Comece a adicionar favoritos para facilitar o acesso aos seus sistemas. 
                <img alt="hehehe" width={10} src="https://rastreio.grupoleonora.com.br/favicon.ico" />
              </div>
          )}
          <ResponsiveReactGridLayout
              {...this.props}
              layouts={this.state.layouts}
              cols={{ xl: 22, lg: 20, md: 16, sm: 12, xs: 8, xxs: 6 }}
              breakpoints={{ xl: 1400, lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
              rowHeight={50}
              isBounded={false}
              onDrag={this.onDrag}
              onDragStop={this.onDragStop}
              onLayoutChange={this.onLayoutChange}
              className="favorites-grid-layout"
              onBreakpointChange={this.onBreakpointChange}
              onDrop={this.onDrop}
              maxRows={1}
              verticalCompact={true}
              measureBeforeMount={false}
              isResizable={false}
              useCSSTransforms={true}
              compactType={"horizontal"}
              preventCollision={this.state.mounted}
              isDroppable={true}
              isDraggable={true}
              style={{ marginLeft: 25, minHeight: 55 }}
          >
            {Array.isArray(this.state.layouts[this.state.currentBreakpoint])
            ? this.generateDOM(this.state.layouts[this.state.currentBreakpoint])
            : null}
          </ResponsiveReactGridLayout>
        </div>
    );
  }

并生成DOM：

generateDOM(layouts: any) 
  {
    return layouts.map((el: any) => {
      const moduleId = this.props.modulesData?.find(q => q.id.toString() === el.i)?.id || -1;
      const isContextMenuOpen = this.state.contextMenus?.find(c => c.index?.toString() === el.i)?.index !== undefined &&
        this.state.contextMenus?.find(c => c.index?.toString() === el.i)?.index !== null;

      return (
        <div
          key={el.i}
          data-grid={el}
          onClick={() => !this.state.isDragging && !isContextMenuOpen && this.openFavorite(this.props.modulesData?.find(q => q.id.toString() === el.i)?.url)}
          onContextMenu={(e: any) => this.handleContextMenu(this.props.modulesData?.find(q => q.id.toString() === el.i)?.id || -1, e)}
          style={{ cursor: 'pointer' }}
        >
          <CardLinkFavoriteDisabled
            image={this.props.modulesData?.find(q => q.id.toString() === el.i)?.imageNavigation.filename}
            title={this.props.modulesData?.find(q => q.id.toString() === el.i)?.name}
          />
          <Menu
            PaperProps={{
              sx: {
                boxShadow: '0px 2px 10px 0px rgba(58, 53, 65, 0.1) !important',
                backgroundImage: 'linear-gradient(98deg, rgba(10,12,71,0.9), rgba(59,240,58,0.9) 160%)'
              },
            }}
            open={isContextMenuOpen}
            onClose={() => this.handleClose(moduleId)}
            anchorReference="anchorPosition"
            anchorPosition={
              this.props.modulesData?.find(q => q.id.toString() === el.i) !== null
                ? { top: this.state.contextMenus?.find(c => c.index === moduleId)?.mouseY || 0, left: this.state.contextMenus?.find(c => c.index === moduleId)?.mouseX || 0 }
                : undefined
            }
            elevation={0}
            componentsProps={{
              root: {
                onContextMenu: (e) => {
                  e.preventDefault();
                  this.handleClose(moduleId);
                },
              },
            }}
          >
            <MenuItem style={{ fontSize: 12, height: 15, color: 'white' }} onClick={(e) => { this.RemoveFavorite(e, moduleId) }}>
              <DeleteIcon color="error" />
              Remover
            </MenuItem>
          </Menu>
        </div>
      );
    });
  }

问题：我无法单击由generateDOM()生成的div，因为当我单击它时，拖动功能被激活，而不是div上定义的onClick事件。

这是我面临的完全相同问题的一个实例（拖动是在单击时激活的，而不是在移动时激活的）： https://stackblitz.com/edit/react-grid-layout-bug-dragstart?file=index.tsx

谢谢你。

Answer 1

如果在没有实际移动光标的情况下立即激活拖动，您可以添加

onMouseUp

和

onMouseDown

事件来设置

isDragging

状态。

这样如果项目没有被拖动，就会触发

onClick

事件。

通过使用此事件，您可以跟踪项目是否被拖动。

如果

isDragging

是“true”项目--> 拖动。 如果

isDragging

为“假”，则将其视为常规点击。

希望这能解决问题！