这可以通过将onMouseDown传递给子div元素来完成。

<RGL ... >
  <div> // If you add onMouseDown here react-draggable will override it. You will have to use nested element to capture clicks
    <div onMouseDown={ e => e.stopPropagation() }>
      ...
    </div>
  <div>
</RGL>

我设法通过使用movementx和movementy来查看是否存在实际的真实的运动，从而获得了一个可行的解决方案。

private onDrag = (
_layout: Layout[],
oldItem: Layout,
_newItem: Layout,
_placeholder: Layout,
e: MouseEvent,
_element: HTMLElement) => {
if (e.movementX !== 0 || e.movementY !== 0) {
  this.props.onWidgetDragStart(oldItem.i);
}  };

onWidgetDragStart触发设置变量的事件（redux reducer：）

{
\[actionConstants.DASHBOARD.WIDGET_DRAGGING_STARTED\]: (
    state: DraftObject<DashboardsState>,
    action: Action<string>,
  ) => {
   state.isWidgetDragging = true;
   state.indexOfCurrentDraggedItem = action.payload;
 }
}

点击事件如下所示：

private onTitleClicked = (e: React.MouseEvent<HTMLDivElement>) => {
if (this.props.indexOfCurrentDraggedItem === this.props.options.id) {
  e.preventDefault();
  this.props.updatingIndexOfCurrentDraggedItem();
  return;
}

if (!this.props.isWidgetDragging && !this.state.editMode) {
  this.setState({
    editMode: true,
  });
}
{
\[actionConstants.DASHBOARD.WIDGET_DRAGGING_STARTED\]: (
state: DraftObject<DashboardsState>,
action: Action<string>,
) => {
  state.isWidgetDragging = true;
  state.indexOfCurrentDraggedItem = action.payload;
  },
};

其中updatingIndexOfCurrentDraggedItem操作将indexOfCurrentDraggedItem设置为null，并且indexOfCurrentDraggedItem作为 prop 注入到我的小部件组件。

我使用的是移动的浏览器，因此react-grid-layout正在吞噬onClick事件，相反，我还侦听了onTouchStart侦听器，它起作用了。

<IconButton onTouchStart={() => onEditItem(id)} onClick={() => onEditItem(id)}>

我通过LocalStorage中的creating key 'isDragging '解决了这个问题，因为这个解决方案是同步执行的，您可能会造成延迟。
你也可以使用useForceUpdate自定义钩子和isDraggable useRef变量。我有一个很大的嵌套，这个方法对我没有帮助。