阻止链接重定向到React js中的另一个页面

时间:2020-09-10 18:44:04

标签: reactjs react-redux material-ui

我是新来回应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>

请在下面找到磁贴的外观。

Tile

如何防止链接重定向到另一个页面?,请您提供帮助。

谢谢。

1 个答案:

答案 0 :(得分:0)

这是因为ul的内容位于锚标记(链接)内。

您必须删除链接标签外的STAR图标

 <Link>/* content */</Link>