延迟 React onMouseOver 事件

Question

我有一个元素列表，当悬停其中一个时，我想改变我的状态。

 <ListElement onMouseOver={() => this.setState({data})}>Data</ListElement>

不幸的是，如果我将鼠标移到列表上，我的状态会快速连续改变几次。我想延迟状态更改，以便它在被解雇之前等待半秒钟。有办法吗？

原文由 Pierre Olivier Tran 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 debounce 作为专用包或从 lodash 等获取：

用于实现只应在重复操作完成后发生的行为。

 const debounce = require('debounce');

class YourComponent extends Component {
  constructor(props) {
    super(props);

    this.debouncedMouseOver = debounce(handleMouseOver, 200);
  }

  handleMouseOver = data => this.setState({ data });

  render() {
    const data = [];
    return <ListElement onMouseOver={() => this.debouncedMouseOver(data)}>Data</ListElement>;
  }
}

原文由 hsz 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这是一种可以将事件延迟 500 毫秒的方法，使用 onMouseEnter 、 onMouseLeave 和 setTimeout 的组合

请记住，数据的状态更新可以由父组件管理并作为 prop 传入。

 import React, { useState } from 'react'

const ListElement = () => {
    const [data, setData] = useState(null)
    const [delayHandler, setDelayHandler] = useState(null)

    const handleMouseEnter = event => {
        setDelayHandler(setTimeout(() => {
            const yourData = // whatever your data is

            setData(yourData)
        }, 500))
    }

    const handleMouseLeave = () => {
        clearTimeout(delayHandler)
    }

    return (
        <div
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
        >
            I have a delayed event handler
        </div>
    )
}

export default ListElement

原文由 Ian Smith 发布，翻译遵循 CC BY-SA 4.0 许可协议