使用復制粘貼反應數據網格單元格編輯

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 。 他已經解決了這個問題並從中創建了另一個包，但我仍然不知道他是如何做到的。 任何有關這方面的幫助都會非常有幫助。

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})}
      />
    );
}

Answer 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