嵌套按鈕時如何僅激活頂級按鈕的onclick事件？ React.js

Question

我將嘗試進一步解釋這一點。 我有一個 material-UI List 組件，ListItem 組件設置為 button=true 從而使整個項目成為一個按鈕。

在里面我補充說在他里面我有一個 FontAwesomeIcon。 為了隱藏按鈕，我將它的樣式設置為可見性：“隱藏”並將圖標設置為可見性：“可見”，以便可以看到。 （也許有點不好的做法，但沒有想到另一種方式）。

現在，當有人在沒有 Icon 的任何地方按下 ListItem 時，它會激活該 ListItem 的 onClick - 正如它應該的那樣，這很好！ 但是，當按下圖標所在的區域時，“圖標按鈕”和 ListItem 的 OnClick 事件都會被調用 - 應該如此，但我不希望它是那樣。

現在，有沒有辦法讓小的“嵌套”按鈕位於父按鈕的“頂部”，以便只調用它的事件？

如果沒有，有沒有辦法從父 onClick 知道它在沒有 Icon 的區域上被按下，所以我會根據點擊區域調用不同的功能？

此外，我很高興收到任何其他想法，因為我是 React 和網絡的新手，我希望擁有最佳實踐解決方案。

非常感謝 ：）

Answer 1

這與 React 無關。 在 JavaScript 中，您可以使用event.stopPropagation()方法在任何級別停止事件的傳播。 https://www.w3schools.com/JSREF/event_stoppropagation.asp#:~:text=Definition%20and%20Usage,capturing%20down%20to%20child%20elements 。

這是您如何在 React 中執行此操作的示例

import React from "react";
import "./styles.css";

export default function App() {
  const parentButtonHandler = () => {
    console.log("parent");
  };
  const childButtonHandler = (e) => {
    console.log("child");
    e.stopPropagation();
  };

  return (
    <div className="App">
      <button onClick={parentButtonHandler}>
        Hello CodeSandbox
        <button onClick={childButtonHandler}>
          Start editing to see some magic happen!
        </button>
      </button>
    </div>
  );
}

Answer 2

如果我正確理解您的問題，那么您會遇到該問題，因為該事件是冒泡的。 您可以閱讀本文以獲取更多信息： https : //javascript.info/bubbling-and-capturing要解決它，您可以在事件處理程序中使用 event.stopPropagation() 來處理“圖標按鈕”上的點擊事件，因此該事件不會冒泡到作為 ListItem 的父元素

Answer 3

我認為制作嵌套按鈕是個壞主意。 它更難支持，它使您的布局變得混亂。

在您的情況下，您可以根據一些想法來做到這一點：

1. 您的 ListItem 中有兩個單獨的按鈕

export const Comp = () => {
  return (
   <ListItem>
    <button onClick={handleOnMainClick}>mainButton</button>
    <button onClick={handleOnSecondClick}>secondButton</button>
   </ListItem>
  )
}

但如果您的按鈕僅位於左側或右側，則它有效。

2. 如果你想放置你想要的功能按鈕，你可以按位置放置

export const Comp = () => {
  return (
   <ListItem styles={{position: 'relative'}}>
    <button onClick={handleOnMainClick}>mainButton</button>
    <button 
      styles={{position: 'absolute', top: '50%', left: '50%'}} 
      onClick={handleOnSecondClick}>
         secondButton
     </button>
   </ListItem>
  )
}