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

Question

我与一群篮球队有一个sidenav。因此，当其中一个团队悬停时，我想为每个团队显示不同的东西。另外，我正在使用 Reactjs，所以如果我可以有一个变量，我可以将它传递给另一个很棒的组件。

Answer 1

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

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

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

Answer 2

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

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

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

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

ReactJS Docs - Events

Answer 3

为了获得悬停效果，你可以简单地试试这个代码

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

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

Answer 4

我知道接受的答案很好，但对于任何正在寻找悬停感觉的人来说，您可以在mouseover 上使用setTimeout 并将句柄保存在地图中（比如说列表ID 到setTimeout 句柄）。在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。

Answer 5

您可以使用上面 stolli 和 BentOnCoding 建议的那些事件来实现自己的组件逻辑，或者使用名为 react-hover 的模块

如果我可以有一个变量，我可以将它传递给另一个很棒的组件。

那么你可以简单地包装另一个组件

 <ReactHover options={optionsCursorTrueWithMargin}>
  <Trigger type="trigger">
    <TriggerComponent />
  </Trigger>
  <Hover type="hover">
    <HoverComponent />
  </Hover>
</ReactHover>

或您的纯 HTML：

<ReactHover options={optionsCursorTrueWithMargin}>
  <Trigger type="trigger">
    <h1 style={{ background: '#abbcf1', width: '200px' }}> Hover on me </h1>
  </Trigger>
  <Hover type="hover">
    <h1> I am hover HTML </h1>
  </Hover>
</ReactHover>

这里的演示代码：demo

Answer 6

这对 OP 不起作用，因为他们想要一个变量，但对于那些只想要 UI 悬停效果的人来说，坚持使用 CSS 通常更容易。

以下示例将在将鼠标悬停在某个项目上时显示一个删除按钮：

<div className="revealer">
  <div>
    {itemName}
  </div>
  <div className="hidden">
    <Btn label="Delete"/>
  </div>
</div>


.hidden {
  display: none;
}

.revealer:hover .hidden {
  display: block;
}

父 div 有 revealer 类。当它悬停在上面时，它会显示hidden div。隐藏的 div 必须嵌套在显示器 div 中。