代码之家  ›  专栏  ›  技术社区  ›  sosick

如何在单个组件上生成悬停事件?

  •  0
  • sosick  · 技术社区  · 6 年前

    单张照片:

    const Photo = props => (
      <div onMouseEnter={props.onMouseEvent} 
           onMouseLeave={props.onMouseEvent} 
           style={props.backgroundImage}>
        <h4>{props.hovered && props.title}</h4>
      </div>
    ); 
    

    显示许多照片组件:

    class Gallery extends Component {
      state = {
        photos: [], // fetched photos here
        hovered: false
      };
    
      toggleMouseHover = () => this.setState(prev => ({ hovered: !prev.hovered }));
    
      render() {
    
        return (
            {this.state.photos.map(photo => {
              <Photo
                backgroundImage={{ backgroundImage: `url(${photo.src})` }}
                title={photo.title}
                onMouseEvent={this.toggleMouseHover}
                hovered={this.state.hovered}
              />
            })}
        );
      }
    }
    

    1 回复  |  直到 6 年前
        1
  •  3
  •   spaniard    6 年前

    您可以使用纯css实现这一点,使用react并不重要。

    const Photo = props => (
      <div style={props.backgroundImage} className="div-photo">
        <h4 className="photo-title">{props.title}</h4>
      </div>
    ); 
    

    div.div-photo:hover > h4.photo-title {
         display: block;
    }
    
    div.div-photo > h4.photo-title {
        display: none;
    }
    

    我认为这应该行得通。您可以使用属性 visibility 如果你喜欢的话。此外,如注释中所述,属性 opacity 如果要使用淡入/淡出效果,这是一个很好的选择。