嵌套按钮时如何仅激活顶级按钮的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>
  )
}