ReactJS kanban不拖拽(@lourenci/react kanban)

Question

我试着用这个库“@lourenci/ react kanban”制作一个简单的kanban板。

我遵循了他们在github页面( https://codesandbox.io/s/react-kanban-demo-nvjp3?file=/src/index.js:141-163)上提出的例子，但问题是，我可以获得板，但我的卡不能移动。就像没有创建拖放一样。

import ContentBody from '../../components/layout/content-body';
import Sidebar from '../../components/layout/sidebar';
import TitleBar from '../../components/layout/titlebar';
import CircularProgress from '@mui/material/CircularProgress';
import Typography from '@mui/material/Typography';
import { Navigate, useParams } from "react-router-dom";

import kanbanService from '../../services/kanban.service';

import Board, { moveCard } from "@lourenci/react-kanban";
import "@lourenci/react-kanban/dist/styles.css";

const initialBoard = {
    columns: [
        {
          id: 1,
          title: "Backlog",
          cards: [
            {
              id: 1,
              title: "Card title 1",
              description: "Card content"
            },
            {
              id: 2,
              title: "Card title 2",
              description: "Card content"
            },
            {
              id: 3,
              title: "Card title 3",
              description: "Card content"
            }
          ]
        },
        {
          id: 2,
          title: "Doing",
          cards: [
            {
              id: 9,
              title: "Card title 9",
              description: "Card content"
            }
          ]
        },
        {
          id: 3,
          title: "Q&A",
          cards: [
            {
              id: 10,
              title: "Card title 10",
              description: "Card content"
            },
            {
              id: 11,
              title: "Card title 11",
              description: "Card content"
            }
          ]
        },
        {
          id: 4,
          title: "Production",
          cards: [
            {
              id: 12,
              title: "Card title 12",
              description: "Card content"
            },
            {
              id: 13,
              title: "Card title 13",
              description: "Card content"
            }
          ]
        }
      ]
};
  
export default function KanbanBoard({setShowLoader, showMessageError, showMessageSuccess}) {
    const { id } = useParams();
    const [isLoaded, setIsLoaded] = React.useState(true);
    const [error, setError] = React.useState(null);
    const [lists, setLists] = React.useState([]);
        
    const [board, setBoard] = React.useState(initialBoard);

    function onCardMove(card, source, destination) {
        const updatedBoard = moveCard(board, source, destination);
        setBoard(updatedBoard);
         
        console.log("----------");
        console.log(card);
        console.log(source);
        console.log(destination);
        console.log(updatedBoard);
      }

    const fetchBoard = async () => {
        kanbanService.getBoard(id)
        .then(
            (result) => {
                result = result.data;
                setIsLoaded(true);
                setBoard(result);
                fetchLists();
            },
            (error) => {
                setIsLoaded(true);
                setError(error);
            }
        )
    }

    const fetchLists = async () => {
        kanbanService.getLists(id)
        .then(
            (result) => {
                result = result.data;
                setIsLoaded(true);
                setLists(result);
            },
            (error) => {
                setIsLoaded(true);
                setError(error);
            }
        )
    }

    React.useEffect(() => {
        //setIsLoaded(false);
        //fetchBoard();
    },[])

    return(
        <>
            <Sidebar setShowLoader={setShowLoader}>
                <TitleBar title={board.board_name}>
                </TitleBar>
                <ContentBody usePadding={true}>
                {(error)  ? (
                    <div > 
                        <Typography variant="subtitle1" gutterBottom component="div" style={{color:"red"}}>
                            <strong>Errore:</strong> {error.message}
                        </Typography> 
                    </div>
                ):(
                    !isLoaded ? (
                        <div style={{padding:"30px"}}><CircularProgress /></div>
                    ) : (
                        <>
                            <Board 
                                onCardDragEnd={onCardMove} 
                                disableColumnDrag
                            >
                            {board}
                            </Board>
                        </>
                    )
                )}
                </ContentBody>
            </Sidebar>
        </>
    )
}

我已经安装了npm的软件包，使用param -强制，因为我认为有一些问题的反应18。也许这就是问题所在？但其他用户也安装在反应反应18没有麻烦。

你有主意吗？谢谢

Answer 1

我能想到的一件事就是严格的模式。董事会是如何呈现的，就像这样？

root.render(
  <React.StrictMode>
    <KanbanBoard />
  </React.StrictMode>
);

这似乎是反应-美丽-dnd的一个问题，如这里所示，问题2399。

删除严格模式时，拖放是否工作？

root.render(
  <KanbanBoard />
);