🌟
【React】画像にカーソルが当たった時にボタン表示し、押下したら特定の処理を実行する
Reactを駆使して「画像にカーソル当たった時にボタンを表示し、押下したら特定の処理を実行する」という実装をやってみた記録。
前提
以下のようなスペック下で実装。
- "react": "18.2.0"
- "@mui/material": "5.11.15"
- "@mui/icons-material": "5.11.11"
- "@emotion/styled": "11.10.6"
実装
muiのBoxなどを利用しつつ、画像とボタンを重ねる。今回はボタンを押すことで画面上からその画像を消すような実装に。
Pointいくつか
onMouseEnter / onMouseLeave で、その画像にカーソルが当たった時 / 外れた時の処理を実装。
<Box
key={picture.id}
sx={{ position: "relative" }}
onMouseEnter={() => {
setHoveredPictureId(picture.id);
setOnHover(true);
}}
onMouseLeave={() => {
setHoveredPictureId(null);
setOnHover(false);
}}
>
...
useCallbackを利用して、どれか一つにカーソルが当たった時、全画像にボタンが表示されないよう一工夫。
const isHoveredOnPicture = useCallback((pictureId) => {
if (hoveredPictureId === null) return false;
return onHover && hoveredPictureId === pictureId;
},
[onHover, hoveredPictureId]
);
...
{isHoveredOnPicture(picture.id) && (
<StyledOnImageButton
onClick={() => handleRemovePicture(picture.id)}
onKeyDown={() => handleRemovePicture(picture.id)}
tabIndex={0}
>
<RemoveCircle color="inherit" />
</StyledOnImageButton>
)}
参考
Discussion