问题描述
我在 React 中使用 Chakra UI,当我尝试单击可点击框中的按钮时,正在执行 Box 的功能。 Z-index 也没有解决这个问题。
我的代码:
<Box
w="90%"
h="auto"
mt="10px"
position="relative"
key={index}
borderWidth="1px"
borderRadius="lg"
onClick={() =>
history.push(`/products/${item.cat_name}/${item.id}`)}
>
<h1 className={styles.heading_bold}>{item.cat_name}</h1>
<Button position="absolute" top="3" right="3" zIndex="0"> //Button not able to click
Options
</Button
</Box>
解决方法
它应该是 onClick
而不是 onclick。
<Button
onClick={() => console.log("button clicked")} // Typo fixed
position="absolute"
top="3"
right="3"
zIndex="0"
>
这是CodeSandbox:
https://codesandbox.io/s/debuuge-lwio5
另请注意,Button is
中的 Box
因此首先调用 Button
处理程序,然后在单击按钮时调用 Box
处理程序。
要阻止事件传播,您可以使用以下代码。
<Button
onClick={(e) => {
e.stopPropagation();
console.log("button clicked");
}}
position="absolute"
top="3"
right="3"
zIndex="0"
>
现在,每当您单击 Button 时,只会调用它的处理程序,您会在输出中看到 button clicked
。