2

我正在使用 NextJS 和 MaterialUI，我有一些代码可以显示一张卡片，里面有一些文本和按钮。

卡片组件示例

卡片的某些部分会将用户带到页面 A。本质上，单击卡片上的任何位置（标题、文本、空白区域）时，用户应该被重定向到该页面。

但问题是仅在单个按钮上使用链接标签是不够的，空格会变得未使用。

我尝试的是嵌套整个 Card 组件（在 MaterialUi 中制作）。虽然单击任意位置（也包括空白区域）会将用户重定向到页面 A，但单击喜欢、评论、分享等按钮以及应该显示弹出菜单的 3 点按钮也会重定向到该页面，这是不可取的。

那么，有没有一种干净的方法来防止某些组件在嵌套在 and/or 标记内时充当链接？即使将鼠标悬停在按钮上也不应该在任何浏览器的左下方显示链接。除此以外的任何替代方案onClick: {(e) => e.stopPropogation()}都是优选的。

// data
return (
   // Can wrap Paper with <Link href="www.google.com"><a>"..."</a></Link>
   <Paper>
    <div>
      <CardTopBar // contains the three dot menu (a custom component)
        data={data}
      />
      <Link href="www.google.com">
        <a><div><span>{title}</span></div></a>
       </Link>
       <Link href="www.google.com">
         <a><h1>{title}</h1></a>
        </Link>

        <List disablePadding>
          <ListItem disableGutters>
            <Link href="www.profilepage.com">
              <a>
                <ListItemAvatar>
                  <Avatar alt="Profile Image" src="">{userProfile}</Avatar>
                </ListItemAvatar>
              </a>
            </Link>
            <Link href="#">
              <a><ListItemText primary={firstName} secondary={otherText}/></a>
            </Link>
            <ListItemSecondaryAction>
              <Link href="www.otherdetails.com">
                <a>
                  <Button color="primary" size="small" variant="outlined">
                    {otherDetails}
                  </Button>
                </a>
              </Link>
            </ListItemSecondaryAction>
          </ListItem>
        </List>
      </div>
      <Link href={"www.google.com"}>
        <a><div><p>{text}</p></div></a>
      </Link>
      <div >
        <MenuItem onClick={() => {}}>
          <ListItemIcon>
            <ThumbUp />
          </ListItemIcon>
          <ListItemText>
            <p>Like</p>
          </ListItemText>
        </MenuItem>
        <MenuItem onClick={() => {}}>
          <ListItemIcon>
            <ChatBubbleOutlineOutlined />
          </ListItemIcon>
          <ListItemText>
            <p>Comment</p>
          </ListItemText>
        </MenuItem>
        <MenuItem onClick={() => {}}>
          <ListItemIcon>
            <ShareOutlined />
          </ListItemIcon>
        </MenuItem>
    </div>
   </Paper>
 );
}
4

1 回答 1

0 
<Link href="www.linked.com">
  <a target="_blank">
    <Paper>
      <Box>
        <Link href="www.google.com">
          <a onClick={(e) => e.stopPropagation()}>first link</a>
        </Link>
      </Box>
      <Box>
        <Link href="www.yahoo.com">
          <a onClick={(e) => e.stopPropagation()}>second link</a>
        </Link>
      </Box>
      <Button
        onClick={(e) => {
          e.preventDefault();
          e.stopPropagation();
          alert("button clicked");
        }}
      >
        click me!
      </Button>
    </Paper>
  </a>
</Link>
于 2021-11-17T21:41:29.260 回答