无法点击可点击按钮内的按钮 div

Question

我在 React 中使用 Chakra UI，当我尝试点击可点击框内的按钮时，正在执行框的功能。 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>

Codesandbox link

Answer 1

应该是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

另请注意 Box 中的 Button is，因此首先调用 Button 处理程序，然后在单击按钮后调用 Box 处理程序。

要停止传播事件，您可以使用以下代码。

  <Button
        onClick={(e) => {
          e.stopPropagation();
          console.log("button clicked");
        }}
        position="absolute"
        top="3"
        right="3"
        zIndex="0"
      >

现在，只要您单击 Button only，它的处理程序就会被调用，您会在输出中看到 button clicked。

无法点击可点击按钮内的按钮 div

Can't click button inside a clickable div

html

css

jsx

reactjs

chakra-ui