axrising
@axrising

Как реализовать возможность перехода по ссылке при клике на бэкграунд?

Есть родитель при клике на которого нужно переходить по ссылке, но при клики на дочерние элементы этого происходить не должно. Буду благодарен за помощь
60910c39048b4455065949.png

<NavLink className={classes.link} to={`/home/tweet/${_id}`}>
      <Paper variant='outlined' className={classes.tweet}>
        <Avatar className={classes.avatarImg} alt='avatar' />
        <div>
          <Link color='textPrimary' component={NavLink} to='/user'>
            <Typography className={classes.nameLink} variant='caption'>
              {user.fullname}
            </Typography>
          </Link>
          <Typography variant='caption' display='inline' color='textSecondary'>
            @{user.username} · {formatDate(new Date(createdAt))}
          </Typography>

          <Typography style={{ marginTop: '4px' }} variant='body2'>
            {text}
          </Typography>

          <div className={classes.dropdown}>
            <IconButton
              size='small'
              aria-label='more'
              aria-controls='long-menu'
              aria-haspopup='true'
              onClick={handleClick}
            >
              <MoreHorizIcon />
            </IconButton>
            <Menu id='long-menu' anchorEl={anchorEl} keepMounted open={open} onClose={handleClose}>
              <MenuItem onClick={handleClose}>
                <EditIcon />
                <Typography variant='caption'>Update tweet</Typography>
              </MenuItem>
              <MenuItem
                onClick={() => {
                  deleteTweet(_id)
                }}
              >
                <DeleteOutlineIcon color='error' />
                <Typography variant='caption' color='error'>
                  Delete tweet
                </Typography>
              </MenuItem>
            </Menu>
          </div>

          <div className={classes.navBtns}>
            <div>
              <IconButton edge='start' className={classes.actionsBtn} aria-label='icon'>
                <ChatBubbleOutlineIcon />
              </IconButton>
              <span className={classes.actionsBtnCount}>17</span>
            </div>
            <div>
              <IconButton className={classes.actionsBtn} aria-label='add an alarm'>
                <RepeatIcon />
              </IconButton>
              <span className={classes.actionsBtnCount}>395</span>
            </div>
            <div>
              <IconButton className={classes.actionsBtn} aria-label='add an alarm'>
                <FavoriteBorderIcon />
              </IconButton>
              <span className={classes.actionsBtnCount}>5.8K</span>
            </div>

            <div>
              <IconButton className={classes.actionsBtn} aria-label='add an alarm'>
                <ShareOutlinedIcon />
              </IconButton>
            </div>
          </div>
        </div>
      </Paper>
    </NavLink>
  • Вопрос задан
  • 57 просмотров
Решения вопроса 1
Seasle
@Seasle
\( ゚ヮ゚)/
Как-то так:
const ClickableArea = ({ component: Component = 'div', to, children, ...props }) => {
	const history = useHistory();
	const control = useRef(null);

	const handleClick = useCallback((event) => {
		if (event.target === control.current) {
			history.push(to);
		}
	}, [history, control, to]);

	return (
		<Component ref={control} onClick={handleClick} tabIndex={-1} {...props}>
			{children}
		</Component>
	);
};

<ClickableArea
	className={classes.tweet}
	component={Paper}
	variant="outlined"
	to={`/home/tweet/${_id}`}
>...</ClickableArea>

Ещё можно внутри Paper создать NavLink на нужную страницу, при помощи ::after на ссылке растянуть её на весь контейнер. При помощи display: grid/flex на родителе можно будет поправить всем остальным элементам z-index.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы