Question

我正在尝试捕获Blueprints JS-table中单元格上的onClick事件。我的目标是在sibbling组件中触发一个方法，该方法将显示有关表中所选（单击）行的信息。

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

如果要单击一行，则应使用a selectedRegionTransform。这将允许拖动选择和多选保持不变。 PR预览页面中有一个示例可以执行此操作。

可悲的是，我找不到那个例子。

在我的组件中，我有这两种方法（稍微简化）

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

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

有人可以帮我理解这是怎么做到的吗？谢谢！

Answer 1

您收到该错误，因为selectedRegionTransform期望您返回一个新的IRegion对象。使用此功能，您可以截取当前的区域选择并在渲染之前进行更改。就我而言，我已使用它将单元格选择转换为行选择。

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

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

selectedRegionTransform处理onClick on Blueprint JS Table单元格

1 个答案: