The onMouseOver event does not seem to trigger, no matter what I try. I can see that its bound to the component, but nothing happens when I mouse over. onClick works as expected. Where am I going astray?
The code itself is a simple image gallery constructor that calls a 'Gallery' function from react-photo-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" ?(<SectionHeadertitle={this.props.pageData.sectionTitle}paragraph={this.props.pageData.blurb}/>) : null}<Col></Col></Container><Row><Col><Galleryphotos={this.props.pageData.photos}onClick={this.openLightbox}onMouseOver={() => console.log("mouse over")}// onMouseLeave={this.onMouseLeaveHander}/><Lightboximages={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;Best Answer
You need to attach hover event on the wrapper div. The external Gallery componet might not be handling the hover event passed as prop.
handleHover = () => {console.log("mouse over");}<div onMouseOver={this.handleHover}><Galleryphotos={this.props.pageData.photos}onClick={this.openLightbox}// onMouseLeave={this.onMouseLeaveHander}/></div>It doesn't appear as though react-photo-gallery implements anything other than an onClick handler.
React components don't handle the same events that native elements handle by default; they have to provide some kind of handler to those events themselves.
The Gallery component allows you to specify a handler for click events. When the elements rendered by the Gallery component receive click events, the handler that you provided will be called.