Блог

Я работаю над компонентом щелчка и перетаскивания, который:

• создает 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} />);
};
  

Эта проблема была решена с useRef помощью и 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} />);
};