首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >在react- grid -layout中捕获网格项单击事件

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

Stack Overflow用户
提问于 2016-07-23 23:38:08
回答 2查看 3.4K关注 0票数 0

是否可以捕获网格项的单击并取消拖动事件?我想要在单击网格项时打开一个模式窗口,但我不知道如何实现它。我使用onClick捕获点击,但是stopPropagationpreventDefault并不阻止开始拖拽过程的mousedown事件。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-11-07 04:15:01

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

代码语言:javascript
复制
<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>
票数 3
EN

Stack Overflow用户

发布于 2018-10-15 21:30:06

我设法得到了一个可行的解决方案,通过使用movementxmovementy来查看是否有实际的真实移动。

代码语言:javascript
复制
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:)

代码语言:javascript
复制
{
\[actionConstants.DASHBOARD.WIDGET_DRAGGING_STARTED\]: (
    state: DraftObject<DashboardsState>,
    action: Action<string>,
  ) => {
   state.isWidgetDragging = true;
   state.indexOfCurrentDraggedItem = action.payload;
 }
}

然后单击事件看起来如下所示:

代码语言:javascript
复制
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作为道具注入到我的小部件组件。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/38543470

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档