javascript - react-data-grid 单元格编辑与复制粘贴

Question

我正在尝试使用反应数据网格（与 excel 相同）创建复制粘贴功能。复制粘贴按预期工作正常，但我面临内联单元格编辑问题。请参考这里的代码https://codesandbox.io/embed/sweet-wave-3qw4y?fontsize=14&hidenavigation=1&theme=dark

在此代码中，如果我编辑一个单元格（更改单元格值）并且没有按 Enter 或箭头键直接单击不同的单元格（正在编辑的单元格除外），则编辑后的值将转移到单击的单元格。

我在 github 上找到了一些东西，但找不到解决方案：https ://github.com/adazzle/react-data-grid/issues/942，https : //github.com/adazzle/react-data-grid/问题/293，https://github.com/adazzle/react-data-grid/issues/1460和https://github.com/adazzle/react-data-grid/issues/1474 _

请让我知道如何解决此问题。

解决方法我在这里找到了解决方案https://www.npmjs.com/package/fixed-react-data-grid。他已经解决了这个问题并从中创建了另一个包，但我仍然不知道他是如何做到的。任何有关这方面的帮助都将非常有帮助。

标签： javascriptreactjsdom-eventsevent-bubblingreact-data-grid

Answer 1

一个简单的解决方法是使用“onCellSeleted”而不是“cellRangeSelection”。像这样：

 render() {
    const { rows } = this.state
    return (
      <ReactDataGrid
        columns={columns}
        rowGetter={i => rows[i]}
        rowsCount={rows.length}
        onGridRowsUpdated={this.onGridRowsUpdated}
        enableCellSelect= {true}
       // cellRangeSelection={{onComplete: this.setSelection}}
        onCellSelected={s => this.setSelection({topLeft: s, bottomRight: s})}
      />
    );
}