RECTマウスに追従するDIVを作成する

869 ワード

クリックするたびに、クリックした場所でdivが検索され、呼び出されます.
divオプション
onMouseMove()オプションを使用します.
まず、onMouseMove()を1つのstateのみを含み、プロジェクト全体を囲むdivに適用します.
const [xy,setXY]=useState({x:0,y:0})
const handleMouseMove=(e)=>{
        setXY({x:e.clientX,y:e.clientY});
    }

<div onMouseMove={(e)=>handleMouseMove(e)}>
   <div
      style={{position:"absolute",left:xy.x,top:xy.y}}
   >마우스따라이동<div>
</div>
HendleMouseMoveの役割はstateを更新することです.
styleで絶対値を与え、左と上部をstate値にします.
マウスがonMouseMoveアプリケーションのdivで移動すると、マウスがよく追従していることがわかります.