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

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 传播到下面的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>
);
}
}