React - 我们能够计算鼠标移入和移出组件之间的时间吗？

Question

我试图构建一个React组件，在悬停在一个div上时需要计算onMouseEnter和onMouseLeave之间的时间差。我已经将"time"加入状态中，但不知道如何继续下去。由于我是React的初学者，无法使其正常工作。请帮帮我...另外，当我尝试显示这些元素时，我不确定显示的timeStamp属性。

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

- Aishwarya

---

是的，你可以，你已经完成了大部分工作。在 handleMouseEnter 中，你需要将当前时间保存到 time 状态变量中，在 handleMouseLeave 中，你需要找到差异，就这些。 - Abin Thaha

Answer 1

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

- 欧阳斌

---

太棒了，谢谢！但是timeStamp值一点用也没有？是在onMouseEnter和onMouseLeave内部的属性吗？ - Aishwarya

Answer 2

你可以添加一个状态来存储时间 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
    })
}

- Viet