CODEWITHSUNDEEP
javascriptreactjs
Aishwarya
Aishwarya

Reputation: 33

React - Can we calculate the time between onMouseEnter and onMouseLeave over a component?

I'm trying to build a React component where I need to calculate the time difference between onMouseEnter and onMouseLeave when I hover over a div? I have added "time" in the state but dunno how to continue it. Since I'm a beginner in React I'm not able to get it working. Please help....Also, when I try to display these elements, I'm not sure about the timeStamp property that gets displayed.

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

Upvotes: 3

Views: 617

Answers (2)

Viet
Viet

Reputation: 12787

You can add a state to store time 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
    })
}

Upvotes: 1

欧阳斌
欧阳斌

Reputation: 2351

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

Upvotes: 5

Related Questions