删除动态React组件中的事件监听器

Question

询问有关在动态反应组件中添加和删除事件监听器的建议。

所以，我有一个包含对象列表的功能组件。

它的渲染方式如下：

objectList.map( (item) => {
return ( 
    <div>
        <some-component with props.id = item.id>
        <some-bootstrap-icon>
    <div>
    )
            }

我的目标是当用户单击图标并拖动鼠标时执行一些操作，并在鼠标抬起后停止这些操作。在这些操作中，我需要了解鼠标移动了多少以及列表中的哪个对象被“触摸”。

我现在有什么

const some_action = (event, id) => { 
    ... using event.movementX and id for some actions
}


const rendering_func = () => {
    return ( {
        objectList.map( (item) => {

            const wrapper = (event) => {
                some_action(event, item.id);
                }       

            return <...>
                <bootstrap-icon 
                onMouseDown={()=>
                    {window.addEventListener("mousemove", wrapper)}
                        }
                onMouseUp={()=>
                    {window.removeEventListener("mousemove", wrapper)}
                        }
                />
                <...>
                    } )

    } )
}

事件监听器已成功添加，并且“some_action”函数完成其工作。 问题是：事件监听器没有在鼠标松开时被删除。

编辑： 想象一下 MS PowerPoint 中的旋转图标。 当你点击它时，你可以拖动鼠标，对象就会旋转。当你松开手时，旋转就会停止。 基本上，我试图在单击、拖动和放开图标方面重新创建相同的功能。

Answer 1

您正在做的是：当您开始“单击”对象时注册一个全局（！）鼠标移动事件侦听器，并在您再次释放鼠标时取消注册它。您可以直接将包装器作为参数传递给 bootstrap-icon 的 onMouseDown/onMouseMove/onMouseUp 属性，如下所示：

const some_action = (id) => (event) => { 
    ... using event.movementX and id for some actions
}


const rendering_func = () => {
    return ( {
        objectList.map( (item) => {    

            return <...>
                <bootstrap-icon 
                onMouseMove={some_action(item.id)}
                />
                <...>
         } )

    } )
}