无论我怎样尝试，onMouseOver 事件似乎都没有触发。我可以看到它绑定(bind)到组件，但是当我将鼠标悬停在上面时没有任何反应。 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;
最佳答案
您需要在包装器 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>
关于javascript - onMouseOver 事件在 React 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51526573/