Question

我正在用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>
        )
}

Answer 1

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

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

有没有一种方法可以禁止在react-data-grid中拖动单元格？

1 个答案: