onMouseEnter 对我不起作用 - React

发布于 2025-01-09 10:24:41 字数 523 浏览 0 评论 0原文

我什至在在线反应沙箱中尝试过它，所以很明显我在这里做错了。 onMouseOver 和 onMouseLeave 也是如此。它在第一次渲染时触发，然后再也不会触发。我希望当我将鼠标悬停在某个元素上时记录到控制台。

import React from "react"



const Parent = () =>{
  const handleMouseEnter = () =>{
    console.log("mouse entered")
  }

  return(
      <>
        <div onMouseEnter={handleMouseEnter} className="w-[50px] h-[50px] bg-green-500" >Hello</div>
      </>
  )};

export default Parent;

原文

I even tried it in an online react sandbox so clearly I'm doing something wrong here.
It's the same with onMouseOver and onMouseLeave. It fires on first render and then never again.
I want when I hover over an element to log to the console.

import React from "react"



const Parent = () =>{
  const handleMouseEnter = () =>{
    console.log("mouse entered")
  }

  return(
      <>
        <div onMouseEnter={handleMouseEnter} className="w-[50px] h-[50px] bg-green-500" >Hello</div>
      </>
  )};

export default Parent;

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

心不设防 2025-01-16 10:24:41

这是因为onMouseEnter内部没有回调函数。

onMouseEnter(handleMouseEnter())

更改为：

onMouseEnter(()=>{handleMouseEnter()})

现在工作正常

import React from "react"



const Parent = () =>{
  const handleMouseEnter = () =>{
    console.log("mouse entered")
  }

  return(
      <>
        <div onMouseEnter={()=>{handleMouseEnter()}} className="w-[50px] h-[50px] bg-green-500" >Hello</div>
      </>
  )};

export default Parent;

It was because there was no callback function inside the onMouseEnter.

onMouseEnter(handleMouseEnter())

changed to:

onMouseEnter(()=>{handleMouseEnter()})

Works fine now

import React from "react"



const Parent = () =>{
  const handleMouseEnter = () =>{
    console.log("mouse entered")
  }

  return(
      <>
        <div onMouseEnter={()=>{handleMouseEnter()}} className="w-[50px] h-[50px] bg-green-500" >Hello</div>
      </>
  )};

export default Parent;

回复收藏 0 原文

~没有更多了~