当有嵌套按钮时，如何仅激活顶级按钮的 onclick 事件？React.js

Question

我将尝试进一步解释这一点。我有一个material-UI List 组件，ListItem 组件设置为button=true，从而使整个项目成为一个按钮。

在里面我补充说，在他里面我有一个 FontAwesomeIcon。为了隐藏按钮，我将其样式设置为可见性：“隐藏”，并将图标设置为可见性：“可见”，以便可以查看。（也许有点不好的做法，但没有想到其他方法）。

现在，当有人在没有图标的任何地方按下 ListItem 时，它会激活该 ListItem 的 onClick - 正如它应该的那样，这很好！但是，当按下图标所在的区域时，“图标按钮”和 ListItem 的 OnClick 事件都会被调用 - 正如它应该的那样，但我不希望它是这样的。

现在，有没有办法使小“嵌套”按钮位于父按钮的“顶部”，以便仅调用它的事件？

如果没有，有没有办法从父 onClick 知道它被按下在没有图标的区域上，这样我就可以根据点击区域调用不同的函数？

另外，任何其他想法都会很高兴收到，因为我是反应和网络的新手，我希望拥有最佳实践解决方案。

非常感谢 ：）

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>
  );
}