handsontable@react @4版本组件怎么才能获取到当前编辑单元格的row和Col，具体代码案例

Handsontable是一个流行的JavaScript库，用于创建交互式的电子表格。在React中集成Handsontable v4版本，你可以通过` Handsontable`组件的事件系统来获取正在编辑的单元格的行(row)和列(col)信息。

首先，你需要安装 Handsontable React 包：

npm install handsontable react-handsontable

然后，在你的组件中初始化Handsontable，并监听`cell editing`事件：

import { HotTable } from 'react-handsontable';

function MyEditor() {
  const [hotInstance, setHotInstance] = useState(null);

  // 初始化Handsontable
  function createHotTable() {
    const columns = [
      { data: 'Name', type: 'text' },
      { data: 'Age', type: 'numeric' }
    ];

    setHotInstance(
      new Handsontable(
        document.getElementById('hot'),
        {
          data,
          colHeaders: true,
          rowHeaders: true,
          cellRenderer('data', (instance, td, row, col, prop, value, cellProperties) => {
            return <input type="text" onInput={(e) => handleCellEdit(e, instance, row, col)} />;
          },
          afterChange(data) {
            // 存储数据变化
          },
          afterRender(row, col, TD) {
            if (TD.className.includes('htInput')) {
              // 当单元格变成输入框时添加事件监听
              TD.addEventListener('input', handleCellEdit);
            } else {
              TD.removeEventListener('input', handleCellEdit);
            }
          },
        }
      )
    );
  }

  // 编辑单元格处理函数
  function handleCellEdit(event, instance, row, col) {
    const { target } = event;
    const newRow = instance.getDataAtRowProp(row, 'row');
    const newCol = instance.getDataAtColProp(col, 'col');

    console.log(`Editing: Row ${row}, Col ${col} - Value: ${target.value}`);
    // 在这里可以根据需要更新状态或其他逻辑
  }

  useEffect(() => {
    createHotTable();
  }, []);

  // 清理事件监听
  return () => {
    if (hotInstance) hotInstance.destroy();
  };

  return (
    <div id="hot">
      {/* Your table header and rows will go here */}
    </div>
  );
}

export default MyEditor;

在这个例子中，当用户开始编辑单元格时，`handleCellEdit`函数会被触发，其中包含了当前行`row`和列`col`的信息。同时，我们移除或添加了`input`事件监听，以确保只在实际编辑期间响应。