selectedRegionTransform 处理 Blueprint JS Table 单元格上的 onClick

Question

我正在尝试捕获 Blueprints JS 中单元格上的 onClick 事件-table。我的目标是在兄弟组件中触发一个方法，该方法将显示有关 table.

中所选（单击）行的信息

在谷歌搜索这个主题时，我发现 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>
    )
}

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

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 因此需要一些帮助。

我希望 table 能够正常响应事件。我只需要一个钩子来触发我自己的函数以及 table.

的正常功能

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

Answer 1

您收到该错误是因为 selectedRegionTransform 期望您 return 一个新的 IRegion 对象。此函数允许您拦截当前区域 selection 并在渲染之前更改它。在我的例子中，我用它将一个单元格 selection 转换成一行 selection.

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

注意：您也可以return cols 指定您想要select的列。

selectedRegionTransform 处理 Blueprint JS Table 单元格上的 onClick

selectedRegionTransform to handle onClick on Blueprint JS Table cell

blueprintjs