(Soy nuevo en React) Esto podría ser algo simple, pero he revisado otros problemas como este y no puedo entender qué estoy haciendo mal. Estoy tratando de hacer una función simple en onMouseOver pero por alguna razón nunca se llama.
Esto es lo que tengo hasta ahora:
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> ) } } Pero nunca veo nada registrado en la consola. ¿Me estoy perdiendo algo simple? Esto funcionó para mí para onClick en otro componente, así que traté de imitar eso aquí, lo que creo que hice, pero ninguno funcionó en este componente.
<div style={{ backgroundColor: 'black', width: '400px', height: '400px' }} onMouseOver={() => console.log("mouse enter")}> </div>`Esto funciona, así que algo más debe estar mal.
Ver caja de arena:
https://codesandbox.io/s/hardcore-mendel-wpfn55?file=/src/App.js
Me faltaba que había ajustado el índice z para algún diseño CSS y puso el elemento detrás de otro.