如何在reactjs中访问悬停状态

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

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

268

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

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

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

40

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

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

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

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

ReactJS Docs-Events
12

对于具有悬停效果,您可以简单地尝试此代码

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">
          <on onMouseOver={MouseOver} onMouseOut={MouseOut}>Hover over me!</on>
        </div>
      );
    }

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

import React from "react";
import "./styles.css";
export default function App() {
   let [over,setOver]=React.useState(false);
   let onstyle={
    backgroundColor:''
  }
  if(over){
    onstyle.backgroundColor="green";
  }
  else{
    onstyle.backgroundColor='';
  }
  return (
    <div className="App">
      <on style={onstyle}
      onMouseOver={()=>setOver(true)} 
      onMouseOut={()=>setOver(false)}
      >Hover over me!</on>
    </div>
  );
}

上面的代码都适用于悬停效果,但第一个过程更容易编写和理解

3

我知道接受的答案是伟大的,但对于任何人谁是寻找一个盘旋喜欢的感觉,你可以使用setTimeoutmouseover,并保存在地图的句柄(让我们说列表 id 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 } = {};

我更喜欢onMouseOveronMouseOut,因为它也适用于HTMLElement中的所有子级。如果不需要,您可以分别使用onMouseEnteronMouseLeave

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(431)
如何将熊猫DataFrame中的列嵌套(分解 )为多行
上一篇
Series的真值不明确。请使用a.empty、a.bool ()、a.item ()、a.any()或a.all()
下一篇

相关推荐

发表评论

登录 后才能评论

评论列表(5条)