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 に答える