有没有办法在反应数据网格中禁用单元格拖动?

Question

我正在用反应数据网格制作可编辑的表格。在 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>
)
}

Answer 1

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

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