0

我已经在一个 React 应用程序中成功实现了 Beautiful DnD，其中可拖动的项目是 Material UI 扩展面板。我有使用 onDragEnd 并将新排序列表保存在状态中的项目列表。

我正在使用 React 钩子、useState、Material-UI 扩展面板和 React-Beautiful-DnD。

当应用程序的这一部分加载时，第一个扩展面板被展开，所有其他面板被折叠。

我一直在尝试的是如何关闭扩展面板 [onDragStart | onBeforeDragStart | onDragUpdate] 然后打开扩展面板 onDragEnd。

我已将每个扩展面板的状态以及其他信息存储在一个数组中，该数组循环并呈现每个扩展面板：{ name: string, expand: string, ... }

我认为这是一个状态没有更新到扩展面板没有接受更改的问题。

我尝试在项目上使用 snapshot.isDragging 来更改扩展面板的展开状态，甚至尝试针对特定的扩展面板，在状态列表中找到相应的项目并更新扩展的道具 onDragStart、onBeforeDragStart 和 onDragUpdate。到目前为止，这些都没有奏效。

这是处理 DnD 的组件的一部分

  const newArray = ReorderList(srcList, ixSelectedItem, 0);
  const panelState: Array<ExpansionState> = [];
  // eslint-disable-next-line array-callback-return
  newArray.map(item => {
    panelState.push({
      name: item as string,
      expanded: item === selectedItem,
      isDragging: false
    });
  });

  const [itemListWithState, setItemListWithState] = useState(panelState);

  const handleOnDragEnd = (result: any): void => {
    const { destination, draggableId, source } = result;

    if (!destination) {
      return;
    }
    if (destination.droppableId === source.droppableId && destination.index === source.index) {
      return;
    }

    const newList = ReorderList(itemListWithState, source.index, destination.index) as Array<ExpansionState>;
    const ix = newList.findIndex(item => item.name === draggableId);
    newList[ix].isDragging = false;
    newList[ix].expanded = !newList[ix].expanded;
    setItemListWithState(newList);
  };

  const handleOnDragUpdate = (result: any): void => {
    const { draggableId } = result;
    const ix = itemListWithState.findIndex(item => item.name === draggableId);
    if (!itemListWithState[ix].isDragging) {
      itemListWithState[ix].expanded = !itemListWithState[ix].expanded;
      itemListWithState[ix].isDragging = true;
    }
  };
...
...
    return (
      <DragDropContext onDragEnd={handleOnDragEnd} onDragUpdate={handleOnDragUpdate}>
        <Droppable droppableId="list">
          {(provided, snapshot) => {
            return (
              <div ref={provided.innerRef} {...provided.droppableProps}>
                {itemListWithState.map((item: ExpansionState, index: number) => {
                  return (
                    <Draggable key={item.name} draggableId={item.name} index={index}>
                      {(provided, snapshot) => {
                        return (
                          <div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
                            <GraphContainer id={item.name} isGraphExpanded={item.expanded} {...props}></GraphContainer>
                          </div>
                        );
                      }}
                    </Draggable>
                  );
                })}
                {provided.placeholder}
              </div>
            );
          }}
        </Droppable>
      </DragDropContext>
    );

这是容纳扩展面板的组件：

  return (
    <div style={{ margin: '20px 0' }}>
      <Panel
        expanded={props.isGraphExpanded}
        summaryTitle={getResourceString(props.id, Resources.Performance)}
        summaryDetail={props.graph}
        isDraggable={true}
        subPanel={
          <Panel
            expanded={false}
            summaryTitle={getResourceString(props.id, Resources.DataTable)}
            summaryDetail={props.table}
            isDraggable={false}
          ></Panel>
        }
      ></Panel>
    </div>
  );
4

0 回答 0