onMouseOver事件在React中不起作用

Question

无论我尝试什么，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; 

Answer 1

您需要在包装器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>

Answer 2

看起来似乎react-photo-gallery不是onClick处理程序。

React组件不处理默认情况下本机元素处理的相同事件; 他们必须为这些事件本身提供某种处理程序。

Gallery组件允许您为单击事件指定处理程序。 当Gallery组件呈现的元素接收单击事件时，将调用您提供的处理程序。