如何在seatchart.js中实现座位图实时编辑？

要实现实时修改行列数并同步更新座位图，核心是通过React状态管理+监听配置变化重新初始化seatchart实例，具体步骤如下：

1. 将配置项转为React状态 #

把原本的常量options改为React的useState状态，确保修改行列数时能触发组件重渲染：

import { useState, useRef, useEffect } from 'react';

function SeatChartComponent() {
  const [seatOptions, setSeatOptions] = useState({
    map: {
      rows: 3,
      columns: 3,
      seatTypes: {
        default: {
          label: "Bronze",
          cssClass: "bronze",
          price: 80
        },
      },
      reserved: [],
      rowSpacers: [],
      columnSpacers: [],
      disabledSeats: [],
      reservedSeats: [],
    },
    cart: {
      visible: false
    },
  });

  // 保存seatchart实例和容器的引用
  const seatChartInstance = useRef(null);
  const chartContainer = useRef(null);

2. 监听行列数变化，重新初始化座位图 #

使用useEffect监听行列数的变化，每次变化时先清理旧实例，再创建新的座位图：

useEffect(() => {
    // 销毁旧实例（如果seatchart提供destroy方法）
    if (seatChartInstance.current) {
      seatChartInstance.current.destroy();
    }

    // 清空容器（无destroy方法时用此兜底）
    if (chartContainer.current) {
      chartContainer.current.innerHTML = '';
    }

    // 创建新的座位图实例
    if (chartContainer.current) {
      seatChartInstance.current = new SeatChart(chartContainer.current, seatOptions);
    }

    // 组件卸载时清理实例
    return () => {
      if (seatChartInstance.current) {
        seatChartInstance.current.destroy();
      }
    };
  }, [seatOptions.map.rows, seatOptions.map.columns]); // 仅监听行列数变化，优化性能

3. 实现表单输入的状态更新逻辑 #

为输入框绑定onChange事件，将输入的行列数同步到状态中：

const handleRowChange = (e) => {
    const newRows = parseInt(e.target.value) || 3; // 兜底默认值，避免非数字错误
    setSeatOptions(prev => ({
      ...prev,
      map: {
        ...prev.map,
        rows: newRows
      }
    }));
  };

  const handleColumnChange = (e) => {
    const newColumns = parseInt(e.target.value) || 3; // 兜底默认值
    setSeatOptions(prev => ({
      ...prev,
      map: {
        ...prev.map,
        columns: newColumns
      }
    }));
  };

4. 渲染座位图和表单 #

在JSX中渲染座位图容器和配置表单：

return (
    <div>
      <div ref={chartContainer} className="seat-chart"></div>
      <div className="layout-form">
        <div>
          <label>行数：</label>
          <input 
            type="number" 
            value={seatOptions.map.rows} 
            onChange={handleRowChange} 
            min="1" 
          />
        </div>
        <div>
          <label>列数：</label>
          <input 
            type="number" 
            value={seatOptions.map.columns} 
            onChange={handleColumnChange} 
            min="1" 
          />
        </div>
      </div>
    </div>
  );
}

export default SeatChartComponent;

注意事项 #

• 如果seatchart.js未提供destroy方法，直接清空容器的innerHTML即可清除旧座位图。
• 输入框需做数值校验，示例中用parseInt加兜底默认值避免无效输入导致的错误。

内容的提问来源于stack exchange，提问作者rolies106