React：单击第 1 列旁边的“打开面板”以显示第 3 列中的项目不起作用

Question

我是 React 新手，当我单击第 1 列旁边的打开面板时，应该显示第 3 列项目 我使用了 use state 但仍然不起作用。 我调试了但仍然没有运气。 下面提供代码和沙箱

https://stackblitz.com/edit/vitejs-vite-gdqdtj?file=src%2FApp.css,src%2Fmain.tsx,src%2FApp.jsx&terminal=dev

import { useState } from 'react';
import reactLogo from './assets/react.svg';
import viteLogo from '/vite.svg';
import './App.css';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';

function App() {
  const [panelOpen, setPanelOpen] = useState(false);

  const [columns, setColumns] = useState({
    column1: { id: 'column1', items: ['Sample_Step1', 'Sample_Step2'] },
    column2: { id: 'column2', items: [] },
    column3: { id: 'column3', items: ['Sample_Step6', 'Sample_Step7'] },
  });

  const tableData = [
    { step: 'Sample_Step1', stepNum: '1', data: 'Enter Text' },
    { step: 'Sample_Step2', stepNum: '2', data: 'Click Button' },
    // ... add more data rows here
  ];

  // const handleDragEnd = (result) => {
  //   // ... logic to move items between columns (explained below)
  // };

  const handleDragEnd = (result) => {
    console.log('handleDragEnd', result);
    const { source, destination } = result;

    // Check if destination is valid
    if (!destination) return;

    // Reorder within the same column
    if (source.droppableId === destination.droppableId) {
      console.log('source.droppableId', source.droppableId);
      // ...implementation for reordering within a column
      const column = columns[source.droppableId];
      const copiedItems = [...column.items]; // Create a copy of the items array
      const [removed] = copiedItems.splice(source.index, 1); // Remove the element
      copiedItems.splice(destination.index, 0, removed); // Insert it at the new position

      setColumns({
        ...columns,
        [source.droppableId]: { ...column, items: copiedItems },
      });
    } else {
      // Moving between columns
      console.log('columns[source.droppableId]', columns[source.droppableId]);
      const sourceColumn = columns[source.droppableId];
      const destColumn = columns[destination.droppableId];
      const [removed] = sourceColumn.items.splice(source.index, 1);
      destColumn.items.splice(destination.index, 0, removed);
      setColumns({ ...columns });
    }
  };

  return (
    <div>
      <DragDropContext onDragEnd={handleDragEnd}>
        <div style={{ display: 'flex' }}>
          <Droppable droppableId="column1">
            {(provided) => (
              <div {...provided.droppableProps} ref={provided.innerRef}>
                <h5>
                  column 1 header{' '}
                  <span onClick={() => setPanelOpen(!panelOpen)}>
                    open panel
                  </span>
                </h5>
                {columns.column1.items.map((item, index) => (
                  <Draggable key={item} draggableId={item} index={index}>
                    {(provided) => (
                      <div
                        {...provided.draggableProps}
                        {...provided.dragHandleProps}
                        ref={provided.innerRef}
                      >
                        <p>{item}</p>
                      </div>
                    )}
                  </Draggable>
                ))}
                {provided.placeholder}
              </div>
            )}
          </Droppable>
          {/* ... Similar for column2 and column3 */}

          <Droppable droppableId="column2">
            {(provided) => (
              <div {...provided.droppableProps} ref={provided.innerRef}>
                {/* ... column 1 header */}
                <h5>column 2 header</h5>

                {columns.column2.items.map((item, index) => (
                  <Draggable key={item} draggableId={item} index={index}>
                    {(provided) => (
                      <div
                        {...provided.draggableProps}
                        {...provided.dragHandleProps}
                        ref={provided.innerRef}
                      >
                        <p>{item}</p>
                      </div>
                    )}
                  </Draggable>
                ))}
                {provided.placeholder}
              </div>
            )}
          </Droppable>

          <Droppable droppableId="column3">
            {(provided) => (
              <div {...provided.droppableProps} ref={provided.innerRef}>
                <h5>column 3 header</h5>

                {columns.column3.items.map((item, index) => (
                  <Draggable key={item} draggableId={item} index={index}>
                    {(provided) => (
                      <div
                        {...provided.draggableProps}
                        {...provided.dragHandleProps}
                        ref={provided.innerRef}
                      >
                        <p>{item}</p>
                      </div>
                    )}
                  </Draggable>
                ))}
                {provided.placeholder}
              </div>
            )}
          </Droppable>

          <Droppable droppableId="column3">
            {(provided) => (
              <div {...provided.droppableProps} ref={provided.innerRef}>
                <h5>
                  column 3 header{' '}
                  {/* <span onClick={() => setPanelOpen(!panelOpen)}>
                    open panel
                  </span> */}
                </h5>

                {panelOpen && (
                  <div className="vertical-panel">
                    {columns.column3.items.map((item, index) => (
                      <Draggable key={item} draggableId={item} index={index}>
                        {/* ... render draggable items */}
                        testing
                        {(provided) => (
                          <div
                            {...provided.droppableProps}
                            ref={provided.innerRef}
                          >
                            <h5>column 3 header</h5>

                            {columns.column3.items.map((item, index) => (
                              <Draggable
                                key={item}
                                draggableId={item}
                                index={index}
                              >
                                {(provided) => (
                                  <div
                                    {...provided.draggableProps}
                                    {...provided.dragHandleProps}
                                    ref={provided.innerRef}
                                  >
                                    <p>{item}</p>
                                  </div>
                                )}
                              </Draggable>
                            ))}
                            {provided.placeholder}
                          </div>
                        )}
                      </Draggable>
                    ))}
                  </div>
                )}
                {provided.placeholder}
              </div>
            )}
          </Droppable>
        </div>
      </DragDropContext>

   
    </div>
  );
}

export default App;

Answer 1

第 150 行的组件导致了该问题。您的状态分配正在按预期工作。

https://stackblitz.com/edit/vitejs-vite-dzigzm?file=src%2FApp.css,src%2Fmain.tsx,src%2FApp.jsx&terminal=dev