无论我怎么尝试,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;
https://stackoverflow.com/questions/51526573
复制相似问题