Question

我正在将Gatsby用于静态网站。

我的页面由两部分组成。第1节和第2节。我想在第2部分中悬停按钮时在第1部分中隐藏图像。

如果我稍微清理一下.js，它看起来像这样：

<section>
    <SomeText/>
    <DefaultImage />
    <ImageOne />
    <ImageTwo />
</section>

<section>
    <Button1/>
    <Button2/>
</section>

我想要实现的目标：默认情况下，显示<DefaultImage/>。如果我将鼠标悬停在<Button1>上，我想隐藏<DefaultImage/>并显示<ImageOne/>。

<Button2/>也一样，将其悬停时应隐藏<DefaultImage/>并显示<ImageTwo/>。

我已经读过有关onMouseEnter和onMouseLeave的信息，我认为答案就在这里，但暂时无法解决。

谢谢您的想法！

也许我也可以在另一个悬停时在“要隐藏”组件上传递一个道具（如css类）

我设法做到了（检查接受的答案）。这是我编辑的代码：

class Parent extends Component {

    state = {
      isHoveringImage1: false
    }
    state = {
        isNotHovering: false
      }
      state = {
        isHoveringImage2: false
      }  

    startHoverMasque = () => this.setState({ isHoveringMasque: true, isNotHovering: true})
    stopHoverMasque = () => this.setState({ isHoveringMasque: false, isNotHovering: false })
    startHoverMains = () => this.setState({ isHoveringMains: true, isNotHovering: true})
    stopHoverMains = () => this.setState({ isHoveringMains: false, isNotHovering: false })

    render() {
      return (
        <>
        <Global 
    styles={globalStyles}/>

          <section>
          {
              this.state.isNotHovering
                ? <ImageDefaultHidden />
                : <ImageDefault/>
            }
            {
              this.state.isHoveringImage1
                ? <Image1 />
                : <ImageDefaultHidden />
            }
            {
              this.state.isHoveringImage2
                ? <Image2 />
                : <ImageDefaultHidden />
            }
          </section>
          <section>
            <Button1
              onMouseEnter={ this.startHoverImage1}
              onMouseLeave={ this.stopHoverImage1 }
            >Bouton1</Button1>
            <Button2
            onMouseEnter={ this.startHoverImage2}
            onMouseLeave={ this.stopHoverImage2 }
            >Bouton 2</Button2>
          </section>

        </>
      )
    }

  }
  export default Parent```

Answer 1

您可以在鼠标进入并离开目标Button到父组件的state中时进行注释：

class Parent extends Component {

  state = {
    isHovering: false
  }

  startHover = () => this.setState({ isHovering: true })
  stopHover = () => this.setState({ isHovering: false })

  render() {
    return (
      <>
        <section>
          <SomeText/>
          {
            this.state.isHovering
              ? <ImageOne />
              : <DefaultImage />
          }
          <ImageTwo />
        </section>

        <section>
          <Button1
            onMouseEnter={ this.startHover }
            onMouseLeave={ this.stopHover }
          />
          <Button2/>
        </section>
      </>
    )
  }

}

Answer 2

解决方案是包括一个变量，该变量说明是否应在父组件的状态下渲染图像。

要设置此变量，请将一个函数传递给包含按钮的组件，并将其绑定到您在问题中给出的事件：onMouseEnter和onMouseLeave。

工作示例：

class App extends React.Component {
	constructor(props) {
		super(props)

		this.state = {
			hideImage: false
		}
	}

	toggleImage = hideImage => ev => {
		this.setState({ hideImage })
	}

	render = () => {

		return(
			<div>
				<ButtonComponent hovered={this.toggleImage}/>
				<ImageComponent isHidden={this.state.hideImage}/>
			</div>
		)
	}
}

const ButtonComponent = ({ hovered }) => <button onMouseEnter={hovered(true)} onMouseLeave={hovered(false)}>Hover me :)</button>

const ImageComponent = ({ isHidden }) => <img hidden={isHidden} src='https://reactjs.org/logo-og.png'/>

ReactDOM.render(<App />, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.5.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.5.1/umd/react-dom.production.min.js"></script>
<div id='root'>

鼠标悬停时隐藏组件

2 个答案: