我已经创建了几个带有特定内容标题的部分。
我想展示一下将鼠标悬停在其他部分上方的简短预览。
有谁知道如何使用有条件的React组件创建hoverActionHandler吗?
您可以使用onMouseEnter和onMouseLeave更改状态,并根据状态的值有条件地渲染组件。
onMouseEnter
onMouseLeave
实际运行中查看它:https : //codesandbox.io/s/XopkqJ5oV
import React, { Component } from 'react'; class HoverExample extends Component { constructor(props) { super(props); this.handleMouseHover = this.handleMouseHover.bind(this); this.state = { isHovering: false, }; } handleMouseHover() { this.setState(this.toggleHoverState); } toggleHoverState(state) { return { isHovering: !state.isHovering, }; } render() { return ( <div> <div onMouseEnter={this.handleMouseHover} onMouseLeave={this.handleMouseHover} > Hover Me </div> { this.state.isHovering && <div> Hovering right meow! </div> } </div> ); } }