Скрыть компонент при наведении на другой

Я использую Gatsby для статического веб-сайта.

Моя страница состоит из двух частей. Раздел 1 и раздел 2. Я хочу скрыть изображение в разделе 1, когда кнопка находится в разделе 2.

Если я немного подчищу свой .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```

reactjs gatsby
person bonakor    schedule 10.01.2019    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы можете аннотировать, когда мышь входит и покидает цель 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>
      </>
    )
  }

}
person 0xc14m1z    schedule 10.01.2019
comment
Спасибо. Это то, что я использовал. Но поскольку я хотел также скрыть изображение по умолчанию при наведении курсора, я добавил несколько вещей (я отредактировал свой исходный пост, чтобы опубликовать решение) :) - person bonakor; 10.01.2019

arrow_upward
0
arrow_downward

Решение состоит в том, чтобы включить переменную, указывающую, должно ли ваше изображение отображаться в состоянии вашего родительского компонента.

Чтобы установить эту переменную, передайте функцию компоненту, содержащему кнопку, и привяжите его к событиям, которые вы указали в своем вопросе: 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'>

person Treycos    schedule 10.01.2019