web-dev-qa-db-ja.com

onMouseOverイベントがReact

OnMouseOverイベントは、何を試してもトリガーされないようです。コンポーネントにバインドされていることがわかりますが、マウスオーバーしても何も起こりません。 onClickは期待どおりに機能します。どこに迷うの？

コード自体は、react-photo-galleryから「Gallery」関数を呼び出す単純な画像ギャラリーコンストラクターです。

class ShowGallery extends React.Component {
  constructor(props) {
    super(props);
    this.state = { currentImage: 0 };
    this.closeLightbox = this.closeLightbox.bind(this);
    this.openLightbox = this.openLightbox.bind(this);
    this.gotoNext = this.gotoNext.bind(this);
    this.gotoPrevious = this.gotoPrevious.bind(this);
    this.gotoImage = this.gotoImage.bind(this);
    this.onMouseEnterHandler = this.onMouseEnterHandler.bind(this, 'value');
    this.onMouseLeaveHandler = this.onMouseLeaveHandler.bind(this, 'value');
  }
  openLightbox(event, obj) {
    this.setState({
      currentImage: obj.index,
      lightboxIsOpen: true
    });
  }
  closeLightbox() {
    this.setState({
      currentImage: 0,
      lightboxIsOpen: false
    });
  }
  gotoPrevious() {
    this.setState({
      currentImage: this.state.currentImage - 1
    });
  }
  gotoNext() {
    this.setState({
      currentImage: this.state.currentImage + 1
    });
  }
  gotoImage(event, obj) {
    this.setState({
      currentImage: obj.index
    });
  }
  onMouseEnterHandler (event, obj) {
    console.log("mouse entered")
  }
  onMouseLeaveHandler (event, obj) {
    console.log("mouse left area")
  }
  render() {
    return (
      <div>
        <Container>
          {this.props.pageData.sectionTitle === "hello" ?(<SectionHeader
            title={this.props.pageData.sectionTitle}
            paragraph={this.props.pageData.blurb}
          />) : null}

          <Col>
          </Col>
        </Container>
        <Row>
          <Col>
            <Gallery
              photos={this.props.pageData.photos}
              onClick={this.openLightbox}
              onMouseOver={() => console.log("mouse over")}
              // onMouseLeave={this.onMouseLeaveHander}
            />
            <Lightbox
              images={this.props.pageData.photos}
              onClose={this.closeLightbox}
              onClickPrev={this.gotoPrevious}
              onClickNext={this.gotoNext}
              currentImage={this.state.currentImage}
              isOpen={this.state.lightboxIsOpen}
              backdropClosesModal={true}
            />
          </Col>
        </Row>
      </div>
    );
  }
}

export default ShowGallery;
javascriptreactjsonmouseover
4
Jared Gilpin

ラッパーdivにホバーイベントをアタッチする必要があります。外部のGalleryコンポーネントは、propとして渡されたホバーイベントを処理していない可能性があります。

handleHover = () => {
  console.log("mouse over");
}
<div onMouseOver={this.handleHover}>
          <Gallery
              photos={this.props.pageData.photos}
              onClick={this.openLightbox}
              // onMouseLeave={this.onMouseLeaveHander}
            />
</div>
5
Anshul Bansal

react-photo-gallery onClickハンドラー以外のものを実装しているようには見えません。

Reactコンポーネントは、ネイティブ要素がデフォルトで処理するのと同じイベントを処理しません。それらは、それらのイベント自体に何らかのハンドラーを提供する必要があります。

ギャラリーコンポーネントを使用すると、クリックイベントのハンドラーを指定できます。 Galleryコンポーネントによってレンダリングされた要素がクリックイベントを受信すると、指定したハンドラーが呼び出されます。

1
Graham Harper