我是新来回应js
我在reactjs中创建了一个磁贴。磁贴中有星形按钮(收藏夹)。单击平铺和星形按钮。当用户单击图块时,它会导航到下一页。单击星号图标时,它只应将图块的状态更改为“收藏夹”,这样做,还可以导航到下一页。我想防止它导航到下一页。请参见下面的代码
我的文件扩展名为.jsx
我是用户资料UI控件。下面的代码有box控件,盒子内部有链接控件,我试过了 event.preventDefault()并为链接分配“#”。但它不起作用
let isFavToggleClicked = false;
let disableLink = false;
const handleFavouriteToggle = (event) => {
isFavToggleClicked = true;
}
const handleTileClick = (event) => {
if (isFavToggleClicked ) {
event.preventDefault();
disableLink = true;
}
}
}
const preventDefault = (event) => event.preventDefault();
return (
<Box
className={disableLink ? "project-tile-box disabled-link" : "project-tile-box"}
onClick={disableLink ? preventDefault : handleTileClick}
>
<Link
to={
disableLink
? '#' : '/project/details/' + project.projectId
}
className={disableLink ? "disabled-link" : ''}
onClick={disableLink ? preventDefault : ''}
>
<Card className={borderColor}>
<CardContent>
<Box>
<Box display="flex" pb={1}>
<Box mr={0.5} flexGrow={1}>
<Tooltip title={project.projectName}>
<Typography
variant="h6"
className="header-three"
>
{Name}
</Typography>
</Tooltip>
</Box>
<Box mr={0.5}>
<Tooltip title={Test}>
<Chip
size="small"
label={"businessPractice"}
/>
</Tooltip>
</Box>
<Box>
<Tooltip title="Pin Project">
<IconButton
onClick={handleFavouriteToggle }
>
{
project.isPinned
? <StarSharp className="task-tile-icon" />
: <StarBorderOutlined className="task-tile-icon" />
}
</IconButton>
</Tooltip>
</Box>
</Box>
</CardContent>
</Card>
请在下面找到磁贴的外观。
如何防止链接重定向到另一个页面?,请您提供帮助。
谢谢。
答案 0 :(得分:0)
这是因为ul
的内容位于锚标记(链接)内。
您必须删除链接标签外的STAR图标
<Link>/* content */</Link>