(我是React的新手(这可能很简单，但我已经研究了很多其他类似的问题，无法找出我做错了什么。我只是想在onMouseOver上做一个简单的函数，但由于某种原因，它从未被调用。
以下是我迄今为止所拥有的：
export default class CardLineItemProgressBarPart extends React.Component<Props> {
constructor(props:Props) {
super(props)
this.showPopup = this.showPopup.bind(this)
}
componentDidMount() {
}
xOffset = 0;
yOffset = 0;
visible = false;
render() {
return (
<div className="CardLineItemProgressBarPart"
style={{
backgroundColor: this.props.color,
width: (this.props.percent + '%')
}}
onMouseOver={() => console.log("mouse enter")}>
</div>
)
}
}
但我从未在控制台中看到任何记录。我是不是错过了一些简单的东西？这对我在另一个组件上的onClick起到了作用，所以我试图在这里模仿它，我想我做到了，但对这个组件都不起作用。
<div
style={{
backgroundColor: 'black',
width: '400px',
height: '400px'
}}
onMouseOver={() => console.log("mouse enter")}>
</div>`
这是有效的，所以肯定是其他地方出了问题。
参见沙盒：
https://codesandbox.io/s/hardcore-mendel-wpfn55?file=/src/App.js
我缺少的是，我为一些CSS布局调整了z索引，它将元素放在了另一个后面。