如何在财富表 React 中选择一个单元格并获取值电子表格

Question

大家好，我想添加一个函数，它是函数 getCellValue 中内置的库，我想利用它来获取选定的单元格值或值范围，但我在库中找不到任何代码来集成它，下面是我的代码

import React,{useState,useEffect} from 'react'
import { Workbook } from "@fortune-sheet/react";
import {useDispatch, useSelector} from "react-redux"
import "@fortune-sheet/react/dist/index.css"
import  {data} from "./data"
import { GetUserSheetData } from '../../../../../../Redux/SheetSlice';

const Sheet = () => {

    const dispatch = useDispatch()

    const [workbookData, setWorkbookData] = useState(null);


    let celldata = [];
    //Converting the Columns to Numeric Values
    const getColumnNumber = (column) => {
      const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
      let colNumber = 0;
    
      // If the column reference is a single character, return its index
      if (column.length === 1) {
        return alphabet.indexOf(column.toUpperCase());
      }
    
      // For multi-character column references like "AA", "AB", etc.
      for (let i = 0; i < column.length; i++) {
        const char = column.charAt(i); // Get the current character
        const charIndex = alphabet.indexOf(char.toUpperCase()) + 1; // Get the index of the character in the alphabet
        colNumber = colNumber * 26 + charIndex; // Calculate the numeric value of the column
      }
    
      return colNumber - 1; // Adjusting to start from 0
    };

    // Loop through the data array to construct the celldata
    for (let i = 0; i < data.length; i++) {

        const col = getColumnNumber(data[i].column)

        celldata.push({
            r: data[i].rows,
            c: col,
            v:{
              v:data[i].value,
              m:data[i].value,
              bg:""
            }
        });
    }

    const handleChange = (data) => {
      console.log(data)
    }


    const handleSelectChange = (workbook) => {
      const selectedRange = workbook.getSelectedRange();
      const selectedCellValue = workbook.getCellValues(selectedRange.row, selectedRange.col);
      console.log(selectedCellValue);
    };


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


  return (
    <div className=' w-full h-full flex flex-col gap-2  ' >
         <Workbook {...settings} />
    </div>
  )
}

export default Sheet

我的handleSelectChange是应用不同内置库函数的正确方法吗

Answer 1

如果我理解正确，您的要求是能够获取工作表中选择的当前单元格。虽然 Fortunesheet 没有为此提供内置事件发射器，但您可以使用其 API 中定义的

getSelection

方法来获取您想要的范围。

文档 | 故事书演示

例如-

const workbookRef = useRef(null);

// call the below line on some event or where you need it
workbookRef.current.getSelection();
// example return value -  [{"row":[0,1],"column":[1,4]}]

return  <Workbook data={[cellData]} onChange={handleSheet} ref={workbookRef} lang="en" />