首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在reactjs中访问悬停状态?

如何在reactjs中访问悬停状态?
EN

Stack Overflow用户
提问于 2015-08-21 02:28:17
回答 5查看 136.4K关注 0票数 138

我和一群篮球队在一起。因此,当其中一个团队被悬停时,我想为每个团队显示一些不同的东西。另外,我正在使用Reactjs,所以如果我可以有一个可以传递给另一个组件的变量,那就太棒了。

EN

回答 5

Stack Overflow用户

回答已采纳

发布于 2015-08-21 02:37:47

React组件在其顶层接口中公开所有标准Javascript鼠标事件。当然,您仍然可以在CSS中使用:hover,这可能足以满足您的某些需求,但是对于由悬停触发的更高级的行为,您需要使用Javascript。因此,要管理悬停交互,您需要使用onMouseEnteronMouseLeave。然后将它们附加到组件中的处理程序,如下所示:

代码语言:javascript
复制
<ReactComponent
    onMouseEnter={() => this.someHandler}
    onMouseLeave={() => this.someOtherHandler}
/>

然后,您将使用状态/属性的一些组合来将更改后的状态或属性向下传递给子React组件。

票数 228
EN

Stack Overflow用户

发布于 2015-08-21 03:12:07

ReactJs为鼠标事件定义了以下合成事件:

代码语言:javascript
复制
onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit
onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave
onMouseMove onMouseOut onMouseOver onMouseUp

正如您所看到的,没有hover事件,因为浏览器本身并不定义hover事件。

您需要为悬停行为添加onMouseEnter和onMouseLeave处理程序。

ReactJS Docs - Events

票数 40
EN

Stack Overflow用户

发布于 2020-06-08 20:45:05

要获得悬停效果,您可以简单地尝试以下代码

代码语言:javascript
复制
import React from "react";
  import "./styles.css";

    export default function App() {

      function MouseOver(event) {
        event.target.style.background = 'red';
      }
      function MouseOut(event){
        event.target.style.background="";
      }
      return (
        <div className="App">
          <button onMouseOver={MouseOver} onMouseOut={MouseOut}>Hover over me!</button>
        </div>
      );
    }

或者,如果你想使用useState()钩子来处理这种情况,你可以试试下面这段代码

代码语言:javascript
复制
import React from "react";
import "./styles.css";


export default function App() {
   let [over,setOver]=React.useState(false);

   let buttonstyle={
    backgroundColor:''
  }

  if(over){
    buttonstyle.backgroundColor="green";
  }
  else{
    buttonstyle.backgroundColor='';
  }

  return (
    <div className="App">
      <button style={buttonstyle}
      onMouseOver={()=>setOver(true)} 
      onMouseOut={()=>setOver(false)}
      >Hover over me!</button>
    </div>
  );
}

以上两个代码都可以实现悬停效果,但第一个过程更容易编写和理解

票数 6
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/32125708

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档