react18-学习笔记27-useEffect3

最新推荐文章于 2023-04-25 14:04:55 发布

前端歌谣

最新推荐文章于 2023-04-25 14:04:55 发布

阅读量65

点赞数

文章标签：学习

本文链接：https://blog.csdn.net/qq_41632427/article/details/126573622

版权

前端-hook组件库-学习专栏收录该内容

40 篇文章 1 订阅

订阅专栏

只渲染一次

import React, { useEffect, useState } from "react";
interface IHelloProps {
  message?: string;
}

const MouseButton:React.FC = () => {
  const [like, setLike] = useState(0);
  const [positions,setPosition]=useState({x:0,y:0})
 useEffect(()=>{
    const updateMouse=(e:MouseEvent)=>{
        setPosition({x:e.clientX,y:e.clientY})
    }
    document.addEventListener("click",updateMouse)
    return()=> (
      document.removeEventListener("click",updateMouse)
    )
 },[])

  return (
    <p>x:{positions.x},Y:{positions.y}</p>
  )
};

export default MouseButton;