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

【问题标题】：react-data-grid cell edit with copy pastereact-data-grid 单元格编辑与复制粘贴
【发布时间】：2020-06-01 01:43:21
【问题描述】：

我正在尝试使用反应数据网格（与 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/issues/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。他已经解决了这个问题并从中创建了另一个包，但我仍然不知道他是如何做到的。任何有关这方面的帮助都会非常有帮助。

【问题讨论】：

只有在启用cellRangeSelection 时才会出现此问题，对吗？
是的，你是对的。
我在这里找到了解决方案npmjs.com/package/fixed-react-data-grid。他已经解决了这个问题并从中创建了另一个包，但我仍然不知道他是如何做到的。任何有关这方面的帮助都会非常有帮助。

标签： javascript reactjs dom-events event-bubbling react-data-grid

【解决方案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})}
      />
    );
}

【讨论】：

【解决方案2】：

canary 中的行选择 API 已更改，并且不再支持 showCheckbox 属性。这是更新日志https://github.com/adazzle/react-data-grid/blob/canary/CHANGELOG.md

这里是一个关于如何实现选择的例子https://github.com/adazzle/react-data-grid/blob/canary/stories/demos/CommonFeatures.tsx#L45

从https://www.gitmemory.com/issue/adazzle/react-data-grid/1987/605651911复制

【讨论】：