javascript - React 事件不向商店发送操作

Question

我正在从事一个涉及使用 React/Redux 进行拖放的项目。

const InitialState = {

  dragged: 0,
  entered: 0,
  
}

我的 reducer :

export const formReducer = (state = InitialState, action = {}) => {
  console.log(action)
  switch (action.type) {
   
    case types.DRAGGED_ITEM:
      return {
        ...state,
        dragged: action.payload
      }

    case types.ENTERED_ITEM:
      return {
        ...state,
        entered: action.payload
      }
    case types.DRAGGED_END:
      return {
        ...state,
        createdElements: reArrangeElements(state.createdElements, state.dragged, state.entered)
      }

    
    default:
      return state;
  }
}

重新排列元素函数:

const reArrangeElements = (elArray, start, enter) => {
  const newArr = [...elArray];
  const draggedItem = newArr[start];
  const enteredItem = newArr[enter];
  newArr.splice(start, 1, enteredItem);
  newArr.splice(enter, 1, draggedItem);
  return newArr;
}

我的行为:

export const draggedItem = (position) => ({
  type: types.DRAGGED_ITEM,
  payload: position
})

export const enteredItem = (position) => ({
  type: types.ENTERED_ITEM,
  payload: position
})

export const dragEnd = () => ({
  type: types.DRAGGED_END
})

还有我的表单生成器函数:这就是问题所在，我将要发送到商店的操作传递给函数，但是事件不能正常工作，尤其是 onDragStart 事件，当我将操作传递给它时，它会禁用可拖动, onDragEnter 不会触发。当我禁用传递给 onDragStart 的操作时，元素变为可拖动。之前，它工作正常，但我不知道发生了什么，我错过了什么？

_creator 函数只是调用和返回 React.createElement()

const _formBuilder = (newComponents, index, remove, draggedItem, enteredItem, dragEnd) => {

  if (!newComponents.length) return;


  const divContainer = _creator('div', {
    key: Math.floor(Math.random() * 1000),
    draggable: true,
    onDragStart: (e) => {

      console.log(index)
      return draggedItem(index)
    },
    onDragEnter: (e) => {
      console.log(index)
      return enteredItem(index)
    },
    onDragEnd: (e) => {
      console.log('index')
      return dragEnd()
    },
   
  }, [
    newElement,
    trash,
  ]);

  return divContainer;
};

Answer 1

据我所知，最终的渲染元素没有考虑更新的顺序——你更新了 entered 中的状态，但它没有在任何地方使用。我做了一个非常粗略的更改，只为了容纳两个元素，但我想您可以从这里详细说明。

还有另一件重要的事情 — 是每个元素的固定键 — 这对于 React 渲染至关重要。我想这就是 onDragEnter 没有触发的原因。

这是一个reworked sandbox .