Kartenbearbeitung in Echtzeit: Tipps und Methoden zum Erkunden vonseatchart.js

Question

Ich versuche, mit Seatchart.js ein Veranstaltungsortlayout zu entwerfen. Ist eine Live-Bearbeitung der Seatchart-Option möglich?

Angenommen, ich möchte die Anzahl der Zeilen und Spalten ändern, indem ich ein Textfeld bearbeite, sehe aber keine Hooks oder Funktionen, mit denen ich das Kartenlayout neu rendern kann.

Dies ist meine Standardoption. Ich möchte die Anzahl der Zeilen und Spalten ändern.

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

Ich habe dieses Formular in React erstellt

Layout-Formular

Ich gehe davon aus, dass die Karte aktualisiert wird, nachdem ich die Anzahl der Zeilen/Spalten geändert habe.

Jede Hilfe wäre sehr dankbar.

Answer 1

我把我的库更改为react-seat-picker，只需要在SeatPicker标签中添加key，像这样

<SeatPicker
    key={randomKey}
...

并且确保在值更新时始终生成一些随机的key。