即時地圖編輯：探索seatchart.js的技巧與方法

Question

我正在嘗試使用seatchart.js設計場館佈局，是否有可能在seatchart選項上進行即時編輯？

假設我想透過編輯文字方塊來更改行和列的數量，但我沒有看到可以用來重新渲染地圖佈局的任何鉤子或函數。

這是我的預設選項，我想要更改行和列的數量。

const options = {
    map: {
      rows: 3,
      columns: 3,
      seatTypes: {
        default: {
          label: "Bronze",
          cssClass: "bronze",
          price: 80
        },
      },
      reserved: [],
      rowSpacers: [],
      columnSpacers: [],
      disabledSeats: [],
      reservedSeats: [],
    },
    cart: {
      visible: false
    },
  }

我在React中建立了這個表單

佈局表單

我期望在我更改行/列數後地圖會更新。

任何幫助將不勝感激。

Answer 1

我把我的函式庫改為react-seat-picker，只需要在SeatPicker標籤中加入key，像這樣

<SeatPicker
    key={randomKey}
...

並且確保在值更新時始終產生一些隨機的key。