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

Question

[Alexander]

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

<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>

Answer 1

[Александр]

Как-то так:

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.

Comments

[Alexander]

Спасибо!