blueprintjs - 选择区域变换以处理 Blueprintjs 表格单元格上的 onClick

Question

我正在 try catch Blueprints JS 表中单元格上的 onClick 事件。我的目标是在同级组件中触发一个方法，该方法将显示有关表中选定(单击)行的信息。

在谷歌搜索这个主题时，我发现了这个 pull request themadcreator 的贡献者评论提示使用 selectedRegionTransform。他还提到了一个例子

If you want to click a row, you should use a selectedRegionTransform. This will allow drag-select and multi-select to remain intact. There is an example in the PR preview page that does this.

遗憾的是，我找不到那个例子。

在我的组件中我有这两种方法(有点简化)

test(a,b) {
    console.log(a,b)
}

render() {
    return(
        <Table numRows={this.state.data.length} selectedRegionTransform={this.test}>
            <Column name="Title" cellRenderer={this.renderTitleCell} />
        </Table>
    )
}

从某种意义上说，test 方法中的 log(a,b) 向我展示了两个对象。一个带有网格坐标，一个带有鼠标事件信息。然后它中断了这条消息。

Uncaught TypeError: Cannot read property 'cols' of undefined
at Function../node_modules/@blueprintjs/table/lib/esm/regions.js.Regions.getRegionCardinality (regions.js:97)
at Table._this.styleMenuRegion (table.js:259)
...

我确定是因为我不知道如何使用 selectedRegionTransform 因此需要一些帮助。

我希望表格能够正常响应事件。我只需要一个钩子(Hook)来触发我自己的函数以及表的正常功能。

有人可以帮助我了解这是如何完成的吗？谢谢!

Answer 1

您收到该错误是因为 selectedRegionTransform 期望您返回一个新的 IRegion 对象。此功能允许您拦截当前区域选择并在渲染之前更改它。在我的例子中，我使用它将单元格选择转换为行选择。

selectedRegionTransform={(e) => {
    return {
        rows: e.rows
    }
}}

注意:您还可以返回 cols 来指定要选择的列。