176
rated 0 times
[
181]
[
5]
/ answers: 1 / hits: 18367
/ 6 Years ago, wed, july 25, 2018, 12:00:00
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 ?(<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;
More From » reactjs
