如何在React Fortune Sheet中选中单元格并获取值

你的handleSelectChange写法存在几个关键问题，下面逐一说明并给出修正方案：

问题点分析 #

1. 参数命名与类型错误：onSelectChange的回调参数是当前激活的Sheet实例，而非Workbook实例，变量名命名不准确容易导致误解。
2. 选中范围属性错误：getSelectedRange()返回的选中范围对象包含startRow、endRow、startCol、endCol属性，而非你代码中的row和col。
3. API调用错误：getCellValues用于获取单元格区域的值，需要传入起始行、起始列、结束行、结束列四个参数；如果是单个单元格，也可以使用更精准的getCellValue(row, col)方法。

修正后的handleSelectChange实现 #

const handleSelectChange = (sheet) => {
  const selectedRange = sheet.getSelectedRange();
  const { startRow, endRow, startCol, endCol } = selectedRange;

  // 处理单个单元格选中的情况
  if (startRow === endRow && startCol === endCol) {
    const cellValue = sheet.getCellValue(startRow, startCol);
    console.log("选中单个单元格的值:", cellValue?.v); // cellValue中的v字段是原始值，m是格式化后的值
  } else {
    // 处理单元格区域选中的情况
    const rangeValues = [];
    for (let r = startRow; r <= endRow; r++) {
      const rowValues = [];
      for (let c = startCol; c <= endCol; c++) {
        const cell = sheet.getCellValue(r, c);
        rowValues.push(cell?.v ?? "");
      }
      rangeValues.push(rowValues);
    }
    console.log("选中区域的值:", rangeValues);
  }
};

额外注意点 #

• Fortune Sheet的单元格对象中，v字段存储的是原始值，m字段存储的是格式化后显示的值，可根据需求选择获取。
• 如果需要直接使用getCellValues获取区域值，可参考API正确传参：sheet.getCellValues(startRow, startCol, endRow, endCol)，返回的是二维数组形式的区域值。

完整代码参考（仅修正关键部分） #

// ... 其他代码不变

const handleSelectChange = (sheet) => {
  const selectedRange = sheet.getSelectedRange();
  const { startRow, endRow, startCol, endCol } = selectedRange;

  if (startRow === endRow && startCol === endCol) {
    const cell = sheet.getCellValue(startRow, startCol);
    console.log("选中单元格值:", cell ? cell.v : "空单元格");
  } else {
    const areaValues = sheet.getCellValues(startRow, startCol, endRow, endCol);
    console.log("选中区域值:", areaValues);
  }
};

const settings = {
  data: [{
    name: 'Sheet1',
    celldata: celldata
  }],
  onChange: handleChange,
  onSelectChange: handleSelectChange,
  lang: 'en',
  row:50
};

// ... 其他代码不变

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