javascript - 将最新的道具发送到 mousemove 事件监听器

Question

我正在开发一个单击并拖动组件，它：

• 创建一个moveListener onMouseDown
• moveListener调度一个更新组件的一些道具的动作（props.whichChange）
• mouseUp清理上述事件侦听器（及其本身）

问题是下面的结果导致最新的道具只传递给'mousemove事件监听器函数一次onMouseDown，而每次发生新mousemove事件时都需要最新的道具。

我该如何修改以下内容以实现此目的？

import React, { MouseEvent as ReactMouseEvent } from 'react';

export const MyComponent = props =>

    const generateMoveListener = args => {
        return (event: MouseEvent) => {
            dispatchAction(args);
        };
    };

    const onMouseDown = (event: ReactMouseEvent) => {
        inputsThatShouldntChange = doSomeCalcs(props.thatDontChange)
        const moveListener = generateMoveListener(inputsThatShouldntChange, props.whichChange);
        document.body.addEventListener('mousemove', moveListener);
        document.body.addEventListener('mouseup', function mouseUp() {
            document.body.removeEventListener('mousemove', moveListener);
            document.body.removeEventListener('mouseup', mouseUp);
        });
    };

    return (<ChildComponent onMouseDown={onMouseDown} />);
};

标签： javascriptreactjs

Answer 1

这个问题用useRefand解决了useEffect：

import React, { 
    MouseEvent as ReactMouseEvent,
    useEffect,
    useRef 
} from 'react';

export const MyComponent = props =>

    useEffect(() => {
        propsRef.current = props;
    }, [props]);

    const onMouseDown = (event: ReactMouseEvent) => {
        if (!propsRef.current) {
            return
        };

        const generateMoveListener = args => {
            return (event: MouseEvent) => {
                dispatchAction(args);
            };
        };

        inputsThatShouldntChange = doSomeCalcs(props.thatDontChange)
        
        const initialProps = props;
        const currentProps = propsRef.current

        const moveListener = generateMoveListener({
            initiapProps, 
            currentProps
        });

        document.body.addEventListener('mousemove', moveListener);

        document.body.addEventListener('mouseup', function mouseUp() {
            document.body.removeEventListener('mousemove', moveListener);
            document.body.removeEventListener('mouseup', mouseUp);
        });
    };

    return (<ChildComponent onMouseDown={onMouseDown} />);
};