Javascript 在鼠标进入时反应显示按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35714535/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
react show button on mouse enter
提问by aryan
I have a react component which hold method like:
我有一个包含方法的反应组件，例如：
mouseEnter(){
console.log("this is mouse enter")
}
render(){
var album_list;
const {albums} = this.props
if(albums.user_info){
album_list = albums.user_info.albums.data.filter(album => album.photos).map((album => {
return
<div className={"col-sm-3"} key={album.id} onMouseEnter={this.mouseEnter}>
<div className={(this.state.id === album.id) ? 'panel panel-default active-album' : 'panel panel-default'} key={album.id} onClick={this.handleClick.bind(this, album.id)}>
<div className={"panel-heading"}>{ album.name }</div>
<div className={"panel-body"}>
<img className={"img-responsive center-block"} src={album.photos.data[0].source} />
</div>
</div>
</div>
}))
}
return (
<div className={"container"}>
<div className="row">
{album_list}
</div>
</div>
)
}
}
Here I have onMouseEnteron album_list. When it is hover or mouse enter I want to dispalay a button on that div.
在这里，我有onMouseEnter上album_list。当它悬停或鼠标输入时，我想在该 div 上显示一个按钮。
How can I do that ??
我怎样才能做到这一点 ？？
Thank you
谢谢
回答by Dan Prince
Update the component's state to reflect whether the mouse is inside the component, then use the state value to conditionally render a button.
更新组件的状态以反映鼠标是否在组件内部，然后使用状态值有条件地渲染按钮。
getInitialState() {
return {
isMouseInside: false
};
}
mouseEnter = () => {
this.setState({ isMouseInside: true });
}
mouseLeave = () => {
this.setState({ isMouseInside: false });
}
render() {
return (
<div onMouseEnter={this.mouseEnter} onMouseLeave={this.mouseLeave}>
{this.state.isMouseInside ? <button>Your Button</button> : null}
</div>
);
}
Inside the render function we use the conditional operator (?) to return the button component if this.state.isMouseInsideis truthy.
在渲染函数中，我们使用条件运算符 ( ?) 返回按钮组件 if 是否this.state.isMouseInside为真。
回答by cjjenkinson
There is another approach that uses a reusable render component that would make components 'hoverable' or 'revealable' - whatever makes sense.
还有另一种方法使用可重用的渲染组件，使组件“可悬停”或“可显示” - 任何有意义的东西。
class Hoverable extends Component {
constructor() {
super();
this.state = {
isMouseInside: false
};
}
mouseEnter = () => {
this.setState({ isMouseInside: true });
}
mouseLeave = () => {
this.setState({ isMouseInside: false });
}
render() {
return this.props.children(
this.state.isMouseInside,
this.mouseEnter,
this.mouseLeave
)
}
}
Then create the functional component that represents the hoverable element. E.g an album
然后创建表示可悬停元素的功能组件。例如专辑
const HoverableElement = props => (
<Hoverable>
{(isMouseInside, mouseEnter, mouseLeave) => (
<div className="menu-item">
<div onMouseEnter={mouseEnter} onMouseLeave={mouseLeave}>
<h2>{props.title}</h2>
</div>
{isMouseInside && props.children}
</div>
)}
</Hoverable>
)
Finally, use the HoverableElement to render a list of elements that will each be 'hoverable' e.g an array of albums
最后，使用 HoverableElement 呈现一个元素列表，每个元素都可以“悬停”，例如专辑数组
class HoverableElementsList extends Component {
render() {
return (
<div>
<HoverableElement title="First Menu">
<p>Some children content</p>
</HoverableElement>
</div>
)
}
}
