react-spreadsheet动态添加行后如何聚焦高亮新增行？

要实现新增行自动聚焦，核心是在添加行后同步更新focusedCell状态，指向新增行的第一个单元格。由于React状态更新是异步的，需借助setRowData的回调参数获取最新行数据长度，以此确定新增行的索引。

修改后的完整代码 #

import React, { useState, useEffect } from 'react';
import { Spreadsheet } from 'react-spreadsheet';

const MySpreadsheet = () => {
  const [focusedCell, setFocusedCell] = useState({ rowIndex: 0, columnIndex: 0 });
  const [rowData, setRowData] = useState([
    [{ value: '1' }, { value: '2' }, { value: '3' }, { value: '4' }, { value: '5' }, { value: '6' }],
    [{ value: '7' }, { value: '8' }, { value: '9' }, { value: '0' }, { value: '1' }, { value: '2' }],
  ]);

  const handleSelect = (rowIndex, columnIndex, selected) => {
    setFocusedCell({ rowIndex, columnIndex });
  };

  const handleBlur = (rowIndex, columnIndex) => {
    console.log("Blur cell:", rowIndex, columnIndex);
  };

  const addRow = () => {
    const newRow = Array(6).fill({ value: '' });
    setRowData(prevRowData => {
      const updatedRows = [...prevRowData, newRow];
      // 将焦点设置到新增行的第一个单元格
      setFocusedCell({ rowIndex: updatedRows.length - 1, columnIndex: 0 });
      return updatedRows;
    });
  };

  useEffect(() => {
    setFocusedCell({ rowIndex: 0, columnIndex: 0 });
  }, []);

  return (
    <>
      <div style={{ marginTop: '40px' }}>
        <button onClick={addRow}>Add Row</button>
      </div>
      <div style={{ marginTop: '40px' }}>
        <Spreadsheet
          data={rowData}
          onSelect={handleSelect}
          onBlur={handleBlur}
          focusedCell={focusedCell}
        />
      </div>
    </>
  );
};

export default MySpreadsheet;

关键改动说明 #

• 在addRow函数中，通过setRowData的回调参数prevRowData获取最新行数据，计算出新增行的索引（updatedRows.length - 1）
• 同步调用setFocusedCell，将焦点定位到新增行的第一个单元格（columnIndex: 0）
• 简化空行创建逻辑，用Array(6).fill({ value: '' })替代重复的对象声明

点击"Add Row"后，新增行的第一个单元格会自动获得焦点并高亮，满足需求。

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