返回

javascript-按钮onClick事件不总是在react组件中触发

发布时间:2022-08-06 11:47:17 248
# 前端

我有一个显示数据行的表。每行上都有一个按钮,单击该按钮将打开一个操作菜单,其中包含许多作为按钮实现的选项。当您单击其中一个操作按钮时,将执行一些操作(在这种情况下,会在浏览器中显示警报)。

我遇到的问题是,动作菜单按钮中的点击事件处理程序在点击几次后就不再触发了。复制(希望)的步骤:

  1. 点击ClickMe对于具有的行Bob,操作菜单将弹出。

  2. 点击Action1此时会出现浏览器警报消息。单击“确定”以解除警报。

  3. 然后执行以下操作:

    Action1,Action2,Action3,Action2,Action3Action3直到它停止报警,或交替Action2Action3直到Action3停止报警;如果你点击Action3然后立即恢复处理点击事件。

一个观察结果是,这些动作按钮上的点击事件处理程序在codepen中更可靠,而在我的本地开发环境中,问题很快就会出现。

我在codepen中提供了一个工作示例:

https://codepen.io/kevstercode/pen/gOexPea

这是codepen示例本身,以防codepen消失:

const { useState, useEffect } = React;

const App: React.FC<{}> = () => {
  return (
    
  );
};

const Results: React.FC<{}> = () => {
  const testData = {
    "recs": [
      {
        "id": "1",
        "name": "Bob"
      },
      {
        "id": "2",
        "name": "Alice"
      },
      {
        "id": "3",
        "name": "Fred"
      }
    ]
  };
  
  const [data, setData] = useState(testData);
    // Show/hide action menu and it's position
  const [isShown, setIsShown] = useState(false);
  const [position, setPosition] = useState({ x: 0, y: 0 });

  // Track last item clicked
  const [lastItemId, setLastItemId] = useState(null);
  
  useEffect(() => {
    setData(testData);
  },[]);
  
  const showActionMenu = (itemId: string, event: React.MouseEvent) => {
    console.log(`*** showActionMenu - this: ${itemId} last: ${lastItemId});`)
    event.preventDefault();
    
    // If last item and this item are the same then we close the action menu
    if(itemId === lastItemId && isShown) {
      setIsShown(false);
      return;
    }

    setIsShown(false);
    
    const newPosition = {
      x: event.pageX,
      y: event.pageY + 8
    };

    setPosition(newPosition);
    setIsShown(true);

    setLastItemId(itemId);
  };

  const hideActionMenu = () => {
    setIsShown(false);
  };
  
  return (
    <>
     hideActionMenu()} />

  display: flex;
  flex-direction: column;
  margin-top: 2px;
  margin-bottom: 2px;
}

.action-menu li {
  list-style-type: none;
  cursor: pointer;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 5px;

.action-menu li:hover {
  background-color: #d1cece;
}

.opt-action-menu li button {
  border: none;
  background: none;
  padding: 0;
}
特别声明:以上内容(图片及文字)均为互联网收集或者用户上传发布,本站仅提供信息存储服务!如有侵权或有涉及法律问题请联系我们。
举报
评论区(0)
按点赞数排序
用户头像