有没有办法在 react-data-grid 中禁用单元格拖动？答案

【问题标题】：Is there a way to disable cell dragging in the react-data-grid?有没有办法在 react-data-grid 中禁用单元格拖动？
【发布时间】：2019-08-14 12:41:11
【问题描述】：

我正在使用 react-data-grid 制作可编辑的表格。在 react-data-grid 中，用于编辑单个单元格并拖动它（因此更新多个单元格）与单元格句柄（类似于 Excel）的功能似乎是耦合的。有没有办法让逐个单元格编辑并禁用拖动？

handleGridRowsUpdated = ({ fromRow, toRow, updated }) => {
    let { rows } = this.state
    rows = rows.slice()

    for (let i = fromRow; i <= toRow; i += 1) {
        const rowToUpdate = rows[i]
        rows[i] = update(rowToUpdate, { $merge: updated })
    }

    this.setState({ rows })
}

rowGetter = (i) => {
    const { rows } = this.state
    return rows[i]
}

render() {
        const { columns, rows } = this.state

        return (
            <div className="table">
                <ReactDataGrid
                    enableCellSelect={true}
                    columns={columns}
                    rowGetter={this.rowGetter}
                    rowsCount={rows.length}
                    onGridRowsUpdated={this.handleGridRowsUpdated}
                    rowHeight={44}
                    minColumnWidth={100}
                />
            </div>
        )
}

【问题讨论】：

标签： reactjs react-data-grid

【解决方案1】：

您可以使用 css 轻松隐藏拖动手柄： .drag-handle { display: none; }

看起来网格属性上有 onCellsDragged 和 onDragHandleDoubleClick 函数可以覆盖，但我没有打扰，因为通过 css 隐藏它要容易得多。

【讨论】：