实时地图编辑：探索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。