为什么我的事件监听器回调没有使用正确的状态？

Question

I have a component to make wrapped elements draggable. When I start dragging, I add event listeners to window for drag movement and drop.

    function start_drag({ x, y }) {
        window.addEventListener('mouseup', trigger_drop);
        window.addEventListener('mousemove', drag_move);
        dispatch({ type: DispatchActions.START, x: x, y: y });
    }

With these callbacks:

    const trigger_drop = (e) => {
        //if (!dragging) { return; }
        end_drag();
        if (deliver()) {
            if (props.onDrop) {
                props.onDrop(e);
            }
        }
    }

    const drag_move = (e) => {
        //if (!state.dragging) { return; }
        dispatch({ type: DispatchActions.MOVE, x: e.x, y: e.y });
        if (props.onDragMove) {
            props.onDragMove(e);
        }
    }

However, these callbacks are using their own versions of state and dispatch. After trying a few things I haven't been able to fix this, and in addition I'm confused about the way 'this' is functioning here.

I am working in React, using only functional components with React Hooks for state and so on. From many other stackoverflow questions the answers have been to use binding/arrow functions. As you can see I'm declaring my callbacks as arrow functions (which isn't working) but this led me to something strange; when I tried binding I found out that this === undefined in my functional component. This is probably related. My searches for this only came up with answers saying to bind this in the constructor for a React.Component class, which doesn't work here.

Here is the full code for the module:

import React, { useContext, useEffect, useReducer } from 'react';
import { DragContext } from 'client/contexts/DragContext';
import dragtarget from './DragTarget.module.css';


const DispatchActions = {
    MOVE: 'move',
    START: 'start',
    STOP: 'stop'
}

function reducer(state, action) {
    switch(action.type) {
        case DispatchActions.MOVE: 
            return { ...state, offset_x: action.x - (state.start_x + state.offset_x), offset_y: action.y - (state.start_y + state.offset_y) };
        case DispatchActions.START:
            return { ...state, dragging: true, start_x: action.x, start_y: action.y, offset_x: 0, offset_y: 0 };
        case DispatchActions.STOP:
            return { ...state, dragging: false };
        default:
            return state;
    }
}


export default function DragTarget(props) {
    const { drag, deliver } = useContext(DragContext);
    const [state, dispatch] = useReducer(reducer, { 
                                                        dragging: false,
                                                        start_x: 0, start_y: 0,
                                                        offset_x: 0, offset_y: 0 
                                                    });

    useEffect(() => {
        return () => {
            end_drag();
        };
    }, []);


    function start_drag({ x, y }) {
        window.addEventListener('mouseup', trigger_drop);
        window.addEventListener('mousemove', drag_move);
        dispatch({ type: DispatchActions.START, x: x, y: y });
    }

    function end_drag() {
        window.removeEventListener('mouseup', trigger_drop);
        window.removeEventListener('mousemove', drag_move);
        dispatch({ type: DispatchActions.STOP });
    }

    const trigger_drag = (e) => {
        e.stopPropagation();
        e.preventDefault();
        if (drag(props.payload)) {
            start_drag({ x: e.x, y: e.y });
            if (props.onDragStart) {
                props.onDragStart();
            }
        }
    }

    const drag_move = (e) => {
        //if (!state.dragging) { return; }
        dispatch({ type: DispatchActions.MOVE, x: e.x, y: e.y });
        if (props.onDragMove) {
            props.onDragMove(e);
        }
    }

    const trigger_drop = (e) => {
        //if (!state.dragging) { return; }
        end_drag();
        if (deliver()) {
            if (props.onDrop) {
                props.onDrop(e);
            }
        }
    }


    return (
        <div className={`${props.className} ${state.dragging ? dragtarget.dragging : null}`} style={{ transform: `translate(${state.offset_x}px, ${state.offset_y}px)` }} onMouseDown={trigger_drag}>
            {props.children}
        </div>
    );
}

Expected: On window.mouseup I want the callback trigger_drop to access the correct state.dragging and dispatch . Same for drag_move on window.mousemove.

Current: On window.mouseup the callback trigger_drop's copy of state.dragging returns false (instead of referencing the correct one, which has true ), and drag_move is dispatching to a state with undefined elements in it (state === {dragging: true, start_x: undefined, start_y: undefined, offset_x: NaN, offset_y: NaN} ).

I hope I explained this clearly, if not please let me know. Thank you in advance for any help!

Answer 1

An easier approach would be to move away from dispatching asynchronous actions and instead utilize a reusable component that handles its own state as a single object with synchronous setState callback updates.

For example, you can simplify your logic with two event listeners and one event callback: one event listener for mouseup (a mouse click) to hold the element, another event listener for mousemove (when holding a mouse click and moving the mouse) to translate the element, and lastly you can use the element's onMouseDown (mouse click release) event callback to release itself at its current position.

Working example (this example uses styled-components for cleaner code, but you don't need to):

---

components/DragContainer/index.js

import styled from "styled-components";

export default styled.div.attrs(({ height, width, x, y }) => ({
  style: {
    transform: `translate(${x - width / 2}px, ${y - height / 2}px)`
  }
}))`
  cursor: grab;
  position: absolute;
  padding: 10px;
  border-radius: 4px;

  background-color: red;

  ${({ isDragging }) =>
    isDragging &&
    `
    opacity: 0.5;
    cursor: grabbing;
    z-index: 999999;
  `}
`;

components/Draggable/index.js

import React, {
  useState,
  useRef,
  useEffect,
  useCallback,
  useLayoutEffect
} from "react";
import PropTypes from "prop-types";
import DragContainer from "../DragContainer";

const Draggable = ({ children, position }) => {
  const dragRef = useRef(null);

  const [state, setState] = useState({
    isDragging: false,
    translateX: position.x,
    translateY: position.y,
    height: 0,
    width: 0
  });

  // mouse move
  const handleMouseMove = useCallback(
    ({ clientX, clientY }) => {
      if (state.isDragging) {
        setState(prevState => ({
          ...prevState,
          translateX: clientX,
          translateY: clientY
        }));
      }
    },
    [state.isDragging]
  );

  // mouse left click release
  const handleMouseUp = useCallback(() => {
    if (state.isDragging) {
      setState(prevState => ({
        ...prevState,
        isDragging: false
      }));
    }
  }, [state.isDragging]);

  // mouse left click hold
  const handleMouseDown = useCallback(() => {
    setState(prevState => ({
      ...prevState,
      isDragging: true
    }));
  }, []);

  // before painting, get element height and width
  // and zero out its position (this is
  // necessary to force the cursor to point at the
  // center of the element when dragging it)
  useLayoutEffect(() => {
    if (state.height < 1 && state.width < 1) {
      const { offsetHeight, offsetWidth } = dragRef.current;
      setState(prevState => ({
        ...prevState,
        translateX: position.x + offsetWidth / 2,
        translateY: position.y + offsetHeight / 2,
        height: offsetHeight,
        width: offsetWidth
      }));
    }
  }, [position, state, setState, dragRef]);

  useEffect(() => {
    window.addEventListener("mousemove", handleMouseMove);
    window.addEventListener("mouseup", handleMouseUp);

    return () => {
      window.removeEventListener("mousemove", handleMouseMove);
      window.removeEventListener("mouseup", handleMouseUp);
    };
  }, [handleMouseMove, handleMouseUp]);

  return (
    <DragContainer
      ref={dragRef}
      isDragging={state.isDragging}
      onMouseDown={handleMouseDown}
      x={state.translateX}
      y={state.translateY}
      height={state.height}
      width={state.width}
    >
      {children}
    </DragContainer>
  );
};

Draggable.propTypes = {
  children: PropTypes.node.isRequired,
  position: PropTypes.shape({
    x: PropTypes.number,
    y: PropTypes.number
  })
};

Draggable.defaultProps = {
  position: {
    x: 10,
    y: 10
  }
};

export default Draggable;

index.js

import React, { Fragment } from "react";
import { render } from "react-dom";
import { Draggable, Title } from "./components";

const App = () => (
  <Fragment>
    <Draggable position={{ x: 20, y: 20 }}>
      <Title>Hello</Title>
    </Draggable>
    <Draggable position={{ x: 140, y: 20 }}>
      <Title>Goodbye</Title>
    </Draggable>
  </Fragment>
);

render(<App />, document.getElementById("root"));

Answer 2

我认为您可以尝试e => trigger_drop(e, props, dispatch)以获取正确的值和调度功能。