RECTマウスに追従するDIVを作成する
869 ワード
クリックするたびに、クリックした場所でdivが検索され、呼び出されます.
divオプション
onMouseMove()オプションを使用します.
まず、onMouseMove()を1つのstateのみを含み、プロジェクト全体を囲むdivに適用します.
styleで絶対値を与え、左と上部をstate値にします.
マウスがonMouseMoveアプリケーションの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で移動すると、マウスがよく追従していることがわかります.
Reference
この問題について(RECTマウスに追従するDIVを作成する), 我々は、より多くの情報をここで見つけました https://velog.io/@jisang8255/REACT마우스를-따라오는-DIV-만들기テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol