忍者ブログ

ひつ(じのひよこが)プログラミングします。
お仕事や趣味で困ったこととか、何度も「あれ?どうだったかしら」と調べたりしたこととか、作ったものとか、こどものこととかを書きます
★前は週末定期更新でしたが今は不定期更新です

2024/11    10« 1  2  3  4  5  6  7  8  9  10  11  12  13  14  15  16  17  18  19  20  21  22  23  24  25  26  27  28  29  30  »12

react-sortablejs で "Uncaught TypeError: MultiDrag is not a constructor" と怒られるので sortablejs から MultiDrag を読み込んだら上手く動いた

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

コメント

ただいまコメントを受けつけておりません。

react-sortablejs で "Uncaught TypeError: MultiDrag is not a constructor" と怒られるので sortablejs から MultiDrag を読み込んだら上手く動いた

react-sortablejs の MultiDrag と Swap のサンプルを試していたら Uncaught TypeError: MultiDrag is not a constructor と怒られた。すなわち、以下のコードである。react-sortablejs は 6.0.0 を使用。

import React from "react";
import { ReactSortable, Sortable, MultiDrag, Swap } from "react-sortablejs";

// mount whatever plugins you'd like to. These are the only current options.
Sortable.mount(new MultiDrag(), new Swap());

const App = () => {
  const [state, setState] = useState([
    { id: 1, name: "shrek" },
    { id: 2, name: "fiona" },
  ]);

  return (
    <ReactSortable
      multiDrag // enables mutidrag
      // OR
      swap // enables swap
    >
      {state.map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}
    </ReactSortable>
  );
};

同様の問題にあたった人がいたようで Issue ([bug] ReactSortable MultiDrag/Swap is not a constructor #143) が書かれている。また、そこには解決策も紹介されており、最上部の import を次のように書き換えたら上手くいったとのことであった。つまり、 MultiDrag や Swap は sortablejs から読み込むのである。

import { ReactSortable } from "react-sortablejs";
import { Sortable, MultiDrag, Swap} from "sortablejs";

これは実際私の手元でも上手く動いた。

PR

コメント

ただいまコメントを受けつけておりません。

ブログ内検索

P R