当有嵌套按钮时，如何只激活顶层按钮的onclick事件?React.js

Question

我将尝试对此进行进一步解释。我有一个材料UI列表组件，其中ListItem组件设置为button=true，从而使整个项目成为一个按钮。

我在里面补充说，在他里面我有一个FontAwesomeIcon。为了隐藏按钮，我将其样式设置为可见性：；隐藏的"；以及图标到可见性："；可见"；这样就可以看到了。(也许有点不好的做法，但并非如此(。

现在，当有人在没有图标的任何地方按下ListItem时，它就会激活该ListItem的onClick——这是应该的，这很好！但是，当按下图标所在的区域时；图标按钮"；并且ListItem被调用了——这是应该的，但我不希望它是那样的。

现在，有没有一种方法可以使；嵌套的"；按钮为"；在顶部"；是否只调用父按钮的事件？

如果没有，有没有办法从父onClick那里知道它是在没有图标的区域上按下的，所以我会根据点击区域调用不同的函数？

此外，任何其他想法都会很乐意接受，因为我是新来的反应和网络，我想有最好的实践解决方案。

非常感谢：(

Answer 1

这与React无关。在JavaScript中，您可以使用event.stopPropagation()方法来停止任何级别的事件传播。https://www.w3schools.com/JSREF/event_stoppropagation.asp#:~：text=定义%20和%20用法，捕获%20down%20到%20child%20元素。

以下是如何在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>
)
}