如何在reactjs中访问悬停状态？

99

我和一群篮球队有过一次聚会。因此，当其中一个团队悬停时，我想为每个团队展示不同的内容。另外，我正在使用Reactjs，所以如果我有一个变量，可以将其传递给另一个很棒的组件。

hover reactjs

— 用户名
source

— BentOnCoding 2015年

158

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

<ReactComponent
    onMouseEnter={this.someHandler}
    onMouseLeave={this.someOtherHandler}
/>

然后，您将使用状态/属性的某种组合将更改后的状态或属性向下传递给您的子React组件。

— 斯托利
source

好吧，我认为这行得通。让我测试一下。另外，如何将此变量传递给其他/未连接的组件？

— 用户

1

实际上，这很棘手，React并未完全提供该功能。在Web应用程序的体系结构中，它融入了所选的全局总体通信方法中。许多人会选择事件总线类型的解决方案，其中某些全局事件管理器正在发布和接收不同组件中的事件。这些事件消息将包含您要作为参数传递的数据。这就是Facebook建议在他们的话题文档：facebook.github.io/react/tips/...

— stolli

2

有一点我想补充的是，onMouseEnter onMouseLeave在DOM事件。他们将无法执行自定义操作ReactComponent，您需要将事件作为道具传递下来，并将这些事件绑定到其中的DOM元素ReactComponent，例如<div onMouseOver={ () => this.props.onMouseOver }>

— DAMIEN JIANG

30

ReactJs为鼠标事件定义了以下综合事件：

onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit
onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave
onMouseMove onMouseOut onMouseOver onMouseUp

如您所见，没有悬停事件，因为浏览器没有本地定义悬停事件。

您将要为onMouseEnter和onMouseLeave添加处理程序以实现悬停行为。

ReactJS文档-事件

— BentOnCoding
source

0

我知道所接受的答案很好，但是对于任何正在寻找悬停的人来说，您都可以使用setTimeout它mouseover并将其保存在地图中（例如，将列表ID设置为setTimeout Handle）。在mouseover清除setTimeout的句柄并将其从地图中删除

onMouseOver={() => this.onMouseOver(someId)}
onMouseOut={() => this.onMouseOut(someId)

并实现地图如下：

onMouseOver(listId: string) {
  this.setState({
    ... // whatever
  });

  const handle = setTimeout(() => {
    scrollPreviewToComponentId(listId);
  }, 1000); // Replace 1000ms with any time you feel is good enough for your hover action
  this.hoverHandleMap[listId] = handle;
}

onMouseOut(listId: string) {
  this.setState({
    ... // whatever
  });

  const handle = this.hoverHandleMap[listId];
  clearTimeout(handle);
  delete this.hoverHandleMap[listId];
}

地图是这样的，

hoverHandleMap: { [listId: string]: NodeJS.Timeout } = {};

我更喜欢onMouseOver并且onMouseOut因为它也适用于所有的儿童HTMLElement。如果不需要，则可以分别使用onMouseEnter和onMouseLeave。

— 里沙夫
source

0

为了产生悬停效果，您只需尝试以下代码

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（）挂钩处理这种情况，则可以尝试这段代码

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>
  );
}

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

— 鲁曼
source