求ReactJS中Handsontable基于BaseEditorComponent的自定义编辑器示例

核心实现思路 #

直接基于BaseEditorComponent扩展自定义编辑器，跳过可能引发报错的super.prepare()调用，手动初始化编辑器所需属性，同时通过React状态管理实现多选复选框的交互逻辑。

完整代码示例 #

1. 自定义编辑器组件

import React, { createRef } from 'react';
import { BaseEditorComponent } from '@handsontable/react';

class MultiSelectCheckboxEditor extends BaseEditorComponent {
  constructor(props) {
    super(props);
    this.editorRef = createRef();
    this.selectedValues = new Set();
  }

  // 手动初始化编辑器属性，替代super.prepare()
  prepare(row, col, prop, td, originalValue, cellProperties) {
    this.row = row;
    this.col = col;
    this.prop = prop;
    this.td = td;
    this.originalValue = originalValue;
    this.cellProperties = cellProperties;

    // 从原始值初始化选中状态
    if (originalValue) {
      originalValue.split(',').forEach(val => this.selectedValues.add(val.trim()));
    }
  }

  open() {
    super.open();
    // 编辑器挂载后自动获取焦点
    setTimeout(() => this.editorRef.current?.focus(), 0);
  }

  // 返回格式化后的选中值
  getValue() {
    return Array.from(this.selectedValues).join(', ');
  }

  // 设置编辑器值
  setValue(value) {
    this.selectedValues.clear();
    if (value) {
      value.split(',').forEach(val => this.selectedValues.add(val.trim()));
    }
    this.forceUpdate();
  }

  render() {
    const options = this.cellProperties.editorOptions?.options || [];

    return (
      <div ref={this.editorRef} className="multi-select-editor">
        {options.map(option => (
          <div key={option.value} className="option-item">
            <input
              type="checkbox"
              checked={this.selectedValues.has(option.value)}
              onChange={(e) => {
                e.target.checked 
                  ? this.selectedValues.add(option.value) 
                  : this.selectedValues.delete(option.value);
              }}
            />
            <label>{option.label}</label>
          </div>
        ))}
      </div>
    );
  }
}

2. 表格组件使用示例

import React, { useRef } from 'react';
import Handsontable from 'handsontable';
import { HotTable } from '@handsontable/react';
import 'handsontable/dist/handsontable.full.min.css';
import './MultiSelectEditor.css'; // 引入自定义样式

export default function MultiSelectTable() {
  const hotRef = useRef(null);

  const columns = [
    {
      data: 'id',
      title: 'ID',
      readOnly: true
    },
    {
      data: 'tags',
      title: '标签',
      editor: MultiSelectCheckboxEditor,
      // 传递下拉选项，支持动态配置
      editorOptions: {
        options: [
          { value: 'react', label: 'React' },
          { value: 'js', label: 'JavaScript' },
          { value: 'handsontable', label: 'Handsontable' },
          { value: 'frontend', label: '前端' },
          { value: 'ui', label: 'UI设计' }
        ]
      },
      // 自定义单元格渲染，优化多行显示
      renderer: (instance, td, row, col, prop, value) => {
        Handsontable.renderers.TextRenderer(instance, td, row, col, prop, value);
        td.style.whiteSpace = 'normal';
        td.style.lineHeight = '1.4';
        td.style.padding = '6px 8px';
        return td;
      }
    }
  ];

  const tableData = [
    { id: 1, tags: 'react, handsontable' },
    { id: 2, tags: 'js, frontend' },
    { id: 3, tags: 'ui' },
    { id: 4, tags: '' }
  ];

  return (
    <div style={{ width: '600px', margin: '20px auto' }}>
      <HotTable
        ref={hotRef}
        data={tableData}
        columns={columns}
        rowHeaders={true}
        colHeaders={true}
        height="auto"
        licenseKey="non-commercial-and-evaluation"
      />
    </div>
  );
}

3. 自定义样式文件（MultiSelectEditor.css）

.multi-select-editor {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px;
  max-height: 220px;
  overflow-y: auto;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.option-item {
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
}

.option-item:hover {
  background-color: #f5f5f5;
}

.option-item label {
  margin: 0;
  flex: 1;
  font-size: 14px;
}

关键注意事项 #

• 跳过super.prepare()：BaseEditorComponent的原生prepare方法在React组件环境下易引发生命周期冲突，手动初始化row、col等核心属性即可避免报错
• 用Set管理选中状态：确保多选逻辑高效且无重复值
• 动态配置选项：通过editorOptions传递选项列表，让编辑器支持复用在不同列
• 自定义渲染器：优化单元格显示效果，支持换行和内边距调整

内容的提问来源于stack exchange，提问作者Mendy F.