时间戳

首页 > 解决方案 > 将鼠标事件传播到 Reactjs 中的 div 下

reactjs - 将鼠标事件传播到 Reactjs 中的 div 下

问题描述

我在反应页面中有一个按钮。在页面顶部，我有一个透明的固定 div，用于注册鼠标移动。

render() {
  return(
    <div>
      <div class="fixed-transparent"
         onMove={(e)=>{console.log('Mouse moved!')}}></div>
      <div class="btn"
         onClick={()=>{console.log('Button click!')}}>
         I'm a button
      </div>
    </div>
  );
}

问题是因为固定的 div 在页面顶部，所以按钮不响应鼠标点击。

如何将鼠标点击从固定 div 传播到下面的那些？

标签： reactjs

解决方案

你有几个选择。您可以让您的子组件（这就是所谓的“底层组件”）也监听鼠标事件，或者如果您让“透明”组件将点击事件处理程序向下传递给子组件。像这样的东西：

import react, { Component } from 'React';

export class ButtonComponent extends Component {
  render() {
    const { onClick } = this.props;
    return <button onClick={onClick}>Click Me!</button>
  }
}

export class TransParentComponent extends Component {
  onClick = e => {
    console.log('handle click here');
  }
  onMove = e => {
    console.log('Mouse moved!');
  }
  render() {
    return(
      <div>
        <div class="fixed-transparent" onMouseMove={this.onMove}></div>
        <ButtonComponent onClick={this.onClick} />
      </div>
    );
  }
}

推荐阅读