Estoy tratando de construir un componente React donde necesito calcular la diferencia de tiempo entre onMouseEnter y onMouseLeave cuando paso el mouse sobre un div. He agregado "tiempo" en el estado pero no sé cómo continuarlo. Como soy un principiante en React, no puedo hacerlo funcionar. Ayuda por favor... Además, cuando trato de mostrar estos elementos, no estoy seguro acerca de la propiedad timeStamp que se muestra.
import React from 'react'; import '../Hover/Hover.css'; class Hover extends React.Component { constructor(props) { super(props); this.handleMouseEnter = this.handleMouseEnter.bind(this); this.handleMouseLeave = this.handleMouseLeave.bind(this); this.state = { isHovering: false, time: 0 } } handleMouseEnter(elementEnter){ console.log("mouseenter : ", elementEnter.timeStamp) this.setState({ isHovering: true }) } handleMouseLeave(elementLeave) { console.log("mouseleave : ", elementLeave.timeStamp) this.setState({ isHovering: false }) } render() { return( <div className="hover" onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}> <h1>Hover Component</h1> </div> ) } }import React from 'react'; import '../Hover/Hover.css'; class Hover extends React.Component { constructor(props) { super(props); this.handleMouseEnter = this.handleMouseEnter.bind(this); this.handleMouseLeave = this.handleMouseLeave.bind(this); this.state = { isHovering: false, enterTime: 0, leavingTime: 0, } } handleMouseEnter(elementEnter){ this.setState({ isHovering: true, leavingTime: Date.now(), }) } handleMouseLeave(elementLeave) { this.setState({ isHovering: false, enterTime: Date.now(), }) } render() { const hoverTime = this.sate.leavingTime - this.state.enterTime; return( <div className="hover" onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}> <h1>Hover Component</h1> { hoverTime > 0 && 'duration is:' + hoverTime } </div> ) } }Puede agregar un estado para almacenar el tiempo handleMouseEnter .
constructor(props) { super(props); this.handleMouseEnter = this.handleMouseEnter.bind(this); this.handleMouseLeave = this.handleMouseLeave.bind(this); this.state = { isHovering: false, time: 0, start: 0 } } handleMouseEnter(elementEnter){ console.log("mouseenter : ", elementEnter.timeStamp) this.setState({ isHovering: true, start: new Date() }) } handleMouseLeave(elementLeave) { const newTime = new Date(); this.setState({ isHovering: false, time: Math.abs(new Date()-this.state.start) // milisecond start: 0 }) }