在鼠标进入时反应显示按钮

关注

发信

关注(28)粉丝(399)

在鼠标进入时反应显示按钮

本文介绍了在鼠标进入时反应显示按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个反应组件，它包含如下方法:

mouseEnter(){console.log("这是鼠标输入")}使成为(){var 专辑列表；const {专辑} = this.props如果(专辑.用户信息){专辑列表 = 专辑.user_info.albums.data.filter(专辑=>专辑.照片).map((专辑=>{返回<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"}>{专辑名称}</div><div className={"panel-body"}><img className={"img-responsive center-block"} src={album.photos.data[0].source}/>

}))}返回 (<div className={"container"}><div className="row">{专辑列表}

)}}

这里我有 album_list 上的 onMouseEnter.当悬停或鼠标进入时，我想在该 div 上显示一个按钮.

我该怎么做??

谢谢

解决方案

更新组件状态以反映鼠标是否在组件内部，然后使用状态值有条件地渲染按钮.

getInitialState() {返回 {isMouseInside: 假};}mouseEnter = () =>{this.setState({ isMouseInside: true });}mouseLeave = () =>{this.setState({ isMouseInside: false });}使成为() {返回 (<div onMouseEnter={this.mouseEnter} onMouseLeave={this.mouseLeave}>{this.state.isMouseInside ?<button>你的按钮</button>: 空值}

);}

在渲染函数中，如果 this.state.isMouseInside 为真，我们使用条件运算符 (?) 返回按钮组件.

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 onMouseEnter on album_list. When it is hover or mouse enter I want to dispalay a button on that div.

How can I do that ??

Thank you

解决方案

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.isMouseInside is truthy.

这篇关于在鼠标进入时反应显示按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

09-05 08:06