自定義 react-admin 拖放列表

Question

拖不動。 它有什么問題？

我正在使用帶有 material-ui 的 react-sortable-hoc 來自定義具有拖放排序功能的 react-admin 列表頁面。

演示： https://codesandbox.io/s/vibrant-visvesvaraya-4k3gs
源代碼： https://github.com/tangbearrrr/poc-ra-sort-drag/tree/main

Answer 1

正如我檢查的那樣，您正在從 props 獲取data ，而在props中不存在數據字段，因此錯誤來自那里

這是所有道具清單

Answer 2

您使用的 sortable 方法來自react-sortable-hoc ，這給 react-admin 增加了巨大的復雜性。

不是那么快，我已經嘗試調試你的代碼並提出另一個解決方案工作得很好但不太理想，就是使用sortablejs ：

yarn add sortablejs
yarn add @types/sortablejs --dev

不要搞砸react-sortablejs ，這也適用於與react-sortable-hoc相同的復雜度級別。

讓我們以您的cmsLanguage為例，更改為使用Datagrid 。

請注意，此工作解決方案需要在 null el上重試幾次（例如，您的數據正在獲取、網絡速度慢等）。 下面的代碼有 3 次重試，每次重試 1500 毫秒。 初始化將在 3 次嘗試后停止。

import {Datagrid, ShowButton, TextField} from "react-admin";
import * as React from "react";
import MenuIcon from '@mui/icons-material/Menu';
import {useEffect} from "react";
import Sortable from 'sortablejs';

const LanguageList = () => {

    // This will run the effect after every render
    useEffect(() => {
        // https://github.com/SortableJS/Sortable
        const retries = 3;
        const millisecords = 1500;
        let attempts = 0;

        const retrySortable = () => {
            const el = document.querySelector('#sortable-list tbody');
            if (!el) {
                if (++attempts >= retries) {
                    console.log(`cannot initialise sortable after ${retries} retries.`);
                } else {
                    setTimeout(() => retrySortable(), millisecords);
                }
            } else {
                // @ts-ignore
                new Sortable(el, {
                    handle: ".handle",
                    draggable: "tr",
                    animation: 150,  // ms, animation speed moving items when sorting, `0` — without animation
                    easing: "cubic-bezier(1, 0, 0, 1)", // Easing for animation. Defaults to null. See https://easings.net/ for examples.
                    // Element dragging ended
                    onEnd: (evt) => {
                        // @ts-ignore
                        const reorderedList: string[] = [];
                        const list = document.querySelectorAll('#sortable-list tbody td.column-name span');

                        [].forEach.call(list, function (span: Element) {
                            reorderedList.push(span.innerHTML);
                        });
                        console.log(JSON.stringify(reorderedList));
                        console.log(evt);
                    },
                });
            }
        }
        retrySortable();

    }, []);

    return (
        <section id="sortable-list">
            <Datagrid>
                <MenuIcon sx={{cursor: "pointer"}} className="handle"/>
                <TextField source="name"/>
                <ShowButton/>
            </Datagrid>
        </section>
    );
};

export default LanguageList;

當有人要求演示時，我會抽出一些時間將其制作成 GitHub repo 以供更好地參考。