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

kb5ga3dv  于 2023-01-30  发布在  React
关注(0)|答案(8)|浏览(130)

我有一个包含多支篮球队的sidenav。所以当鼠标悬停在其中一支球队上时,我想为每支球队显示不同的内容。另外,我使用Reactjs,所以如果我可以有一个变量,我可以将其传递给另一个组件,那将是非常棒的。

zte4gxcn

zte4gxcn1#

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

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

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

d5vmydt9

d5vmydt92#

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

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

正如您所看到的,这里没有悬停事件,因为浏览器本身没有定义悬停事件。
您将需要为onMouseEnter和onMouseLeave添加处理程序以实现悬停行为。
ReactJS Docs - Events

ct3nt3jp

ct3nt3jp3#

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

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

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

drnojrws

drnojrws4#

我知道公认的答案很好,但是对于任何想要像感觉一样悬停的人,您可以在mouseover上使用setTimeout,并将句柄保存在Map中(比如将列表ID保存到setTimeout句柄)。在mouseover上,从setTimeout中清除句柄并将其从Map中删除

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

并按如下方式实现Map:

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

Map是这样的

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

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

db2dz4w8

db2dz4w85#

这对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内。

v09wglhw

v09wglhw6#

您可以使用stolli和BentOnCoding上面建议的事件来实现自己的组件逻辑,或者使用名为react-hover的模块
如果我有一个变量,可以传递给另一个组件,那就太棒了。
那么你可以简单地 Package 另一个组件

<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

du7egjpx

du7egjpx7#

使用useState,

import React, { useState } from "react";

function App() {
  const [ishover,sethover]=useState(false);

  function MouseOver() {
    sethover(true);
  }
  function MouseOut() {
    sethover(false);
  }
  return (
    <div>
      <button
      style={{backgroundColor: ishover?"black":null}}
        onMouseOver={MouseOver}
        onMouseOut={MouseOut}
        onClick={handleClick}
      >
        Submit
      </button>
    </div>
  );
}

export default App;
pvcm50d1

pvcm50d18#

你可以尝试实现下面的代码。悬停功能可以通过工具提示实现。请参考下面的代码和链接以清楚https://mui.com/material-ui/react-tooltip/

import * as React from 'react';
import DeleteIcon from '@mui/icons-material/Delete';
import IconButton from '@mui/material/IconButton';
import Tooltip from '@mui/material/Tooltip';

export default function BasicTooltip() {
    return (
    <Tooltip title="Delete">
      <IconButton>
        <DeleteIcon />
      </IconButton>
    </Tooltip>
    );
    }

相关问题