在 react-grid-layout 中捕获网格项单击事件答案

【问题标题】：Capturing grid item click event in react-grid-layout在 react-grid-layout 中捕获网格项单击事件
【发布时间】：2016-07-23 15:38:08
【问题描述】：

是否可以捕获网格项的单击并取消拖动事件？我想在单击网格项时打开一个模式窗口，但我不知道如何实现它。我正在使用onClick 捕获点击，但stopPropagation 和preventDefault 不会阻止启动拖动过程的mousedown 事件。

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

这可以通过将 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>

【讨论】：

【解决方案2】：

我设法通过使用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 被注入到我的小部件组件中。

【讨论】：