Question

我在反应页面中有一个按钮。在页面顶部，我有一个透明的固定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传播到下方？

Answer 1

您有几个选择。您可以让您的子组件（即调用“组件下方”）监听鼠标事件，或者如果您有“透明”组件将click事件处理程序传递给子组件。像这样：

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>
    );
  }
}

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

1 个答案: