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

小编典典

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

reactjs

我有一个反应组件，其中包含如下方法：

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

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

我怎样才能做到这一点？？

谢谢

阅读 266

2020-07-22

共1个答案

小编典典

更新组件的状态以反映鼠标是否在组件内部，然后使用状态值有条件地呈现按钮。

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

在渲染函数内部，?如果this.state.isMouseInside情况确实如此，我们使用条件运算符（）返回按钮组件。

2020-07-22