Question

我正在尝试向用react-bootstrap-table2呈现的表的每一行添加一个删除按钮。我已经按类别对数据进行了排序并置于本地状态

state = {
  data: [
    {
      products: [
        {
          name: "Product 1",
          price: "200"
        },
        {
          name: "Product 2",
          price: "300"
        },
        ...
      ]
    },
    ...
}

并为this.state.data中的每个对象绘制一个单独的表，并使用this.state.data.map((category, index) => ..)填充来自相应对象的产品数组中的数据。我还设置了每个表的id，以匹配this.state.data的对象从其开始渲染的位置的索引。

但是我要努力的是，我想在每一行添加一个删除按钮。搜索后，我发现了formatter的{{1}}属性，它为我们提供了columns，但是如何访问表的cell, row, rowIndex？因此，我可以使用id中的代码：

columns

我不知道如何访问columns = () => { ... { isDummyField: true, formatter: (cell, row, rowIndex) => { return <Button color="primary" onClick={() => { console.log (`Product ${rowIndex} of Category ${tableId} deleted`); }> Delete Product </Button> } } }。谁能帮我这个？我总是发现react-bootstrap-tables非常令人困惑。

Answer 1

我从后端解决了这个问题。基本上，我为每个产品添加了唯一ID，然后在按钮onClick=()中，我只是使用row.id

访问了产品的唯一ID。

如何在react-bootstrap-table2（React.js）中添加特定于行的操作按钮

1 个答案: