onMouseOver 事件在 React 中不起作用答案

【问题标题】：onMouseOver event not working in ReactonMouseOver 事件在 React 中不起作用
【发布时间】：2018-07-26 04:05:59
【问题描述】：

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

【问题讨论】：

Gallery 是来自外部库的组件，还是您自己的组件？
它是一个外部库，用于创建包含在 div 中的一系列 img 标签。
尝试将 <Gallery /> 包裹在 <div> 中，然后将 mouseOver/mouseEnter 放在 div 上。

标签： javascript reactjs onmouseover

【解决方案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>

【讨论】：

出于好奇，为什么 onClick 可以用作道具，而 onMouseOver 却不行？
这取决于您在项目中使用的第三方模块（Gallery）的实现。在您的情况下，该模块支持点击处理程序。如果您仔细阅读 3rd 方模块的文档，您将更好地了解所有支持的道具。
谢谢。我查看了代码，可以看到添加了一个点击处理程序。现在有意义了。

【解决方案2】：

react-photo-gallery 似乎没有实现除 onClick 处理程序之外的任何东西。

React 组件不处理原生元素默认处理的相同事件；他们必须自己为这些事件提供某种处理程序。

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

【讨论】：