我有一个包含多支篮球队的sidenav。所以当鼠标悬停在其中一支球队上时,我想为每支球队显示不同的内容。另外,我使用Reactjs,所以如果我可以有一个变量,我可以将其传递给另一个组件,那将是非常棒的。
zte4gxcn1#
React组件在它们的顶层接口中公开了所有标准的Javascript鼠标事件。当然,您仍然可以在CSS中使用:hover,这可能足以满足您的某些需求,但是对于由悬停触发的更高级的行为,您需要使用Javascript。因此,要管理悬停交互,你需要使用onMouseEnter和onMouseLeave,然后把它们附加到组件中的处理程序上,如下所示:
:hover
onMouseEnter
onMouseLeave
<ReactComponent onMouseEnter={() => this.someHandler} onMouseLeave={() => this.someOtherHandler} />
然后,您将使用状态/属性的某种组合来将更改的状态或属性传递给子React组件。
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
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> ); }
上面的两个代码都可以实现悬停效果,但第一个过程更容易编写和理解
drnojrws4#
我知道公认的答案很好,但是对于任何想要像感觉一样悬停的人,您可以在mouseover上使用setTimeout,并将句柄保存在Map中(比如将列表ID保存到setTimeout句柄)。在mouseover上,从setTimeout中清除句柄并将其从Map中删除
mouseover
setTimeout
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 } = {};
我更喜欢onMouseOver和onMouseOut,因为它也适用于HTMLElement中的所有子节点。如果不需要,可以分别使用onMouseEnter和onMouseLeave。
onMouseOver
onMouseOut
HTMLElement
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内。
revealer
hidden
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
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;
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> ); }
8条答案
按热度按时间zte4gxcn1#
React组件在它们的顶层接口中公开了所有标准的Javascript鼠标事件。当然,您仍然可以在CSS中使用
:hover
,这可能足以满足您的某些需求,但是对于由悬停触发的更高级的行为,您需要使用Javascript。因此,要管理悬停交互,你需要使用onMouseEnter
和onMouseLeave
,然后把它们附加到组件中的处理程序上,如下所示:然后,您将使用状态/属性的某种组合来将更改的状态或属性传递给子React组件。
d5vmydt92#
ReactJs为鼠标事件定义了以下合成事件:
正如您所看到的,这里没有悬停事件,因为浏览器本身没有定义悬停事件。
您将需要为onMouseEnter和onMouseLeave添加处理程序以实现悬停行为。
ReactJS Docs - Events
ct3nt3jp3#
要获得悬停效果,您可以简单地尝试以下代码
或者,如果您想使用useState()钩子处理这种情况,那么可以尝试以下代码
上面的两个代码都可以实现悬停效果,但第一个过程更容易编写和理解
drnojrws4#
我知道公认的答案很好,但是对于任何想要像感觉一样悬停的人,您可以在
mouseover
上使用setTimeout
,并将句柄保存在Map中(比如将列表ID保存到setTimeout句柄)。在mouseover
上,从setTimeout中清除句柄并将其从Map中删除并按如下方式实现Map:
Map是这样的
我更喜欢
onMouseOver
和onMouseOut
,因为它也适用于HTMLElement
中的所有子节点。如果不需要,可以分别使用onMouseEnter
和onMouseLeave
。db2dz4w85#
这对OP不起作用,因为他们想要一个变量,但是对于那些只想要UI悬停效果的人来说,坚持使用CSS通常更容易。
下面的例子将显示一个删除按钮时,一个项目是悬停:
父div有
revealer
类。当鼠标悬停在上面时,它将显示hidden
div。隐藏的div必须嵌套在显示器div内。v09wglhw6#
您可以使用stolli和BentOnCoding上面建议的事件来实现自己的组件逻辑,或者使用名为react-hover的模块
如果我有一个变量,可以传递给另一个组件,那就太棒了。
那么你可以简单地 Package 另一个组件
或纯HTML:
此处为演示代码:demo
du7egjpx7#
使用useState,
pvcm50d18#
你可以尝试实现下面的代码。悬停功能可以通过工具提示实现。请参考下面的代码和链接以清楚https://mui.com/material-ui/react-tooltip/