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

Question

我正在尝试向使用 react-bootstrap-table2 呈现的表的每一行添加一个删除按钮。我已按类别对数据进行排序并放置在我当地的州

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

并为每个对象呈现一个单独的表，this.state.data并使用来自相应对象的 products 数组中的数据填充this.state.data.map((category, index) => ..)。我还设置了每个表的' 对象id的索引以匹配它们被渲染的位置。this.state.data

但我挣扎的是，我想为每一行添加一个删除按钮；搜索后，我发现了为我们提供的formatter属性，但我如何访问该表？所以我可以潜在地使用我的代码：columnscell, row, rowIndexidcolumns

columns = () => {
  ...
  {
    isDummyField: true,
    formatter: (cell, row, rowIndex) => {
      return <Button 
             color="primary"
             onClick={() => {
               console.log (`Product ${rowIndex} of Category ${tableId} deleted`);
             }>
             Delete Product
             </Button>
    }
  }
}

我不知道如何访问tableId. 谁能帮我这个？我一直觉得 react-bootstrap-tables 非常令人困惑。

标签： reactjsreact-bootstrapreact-bootstrap-table

Answer 1

我从后端解决了这个问题。基本上我为每个产品添加了一个唯一的 id，然后在按钮onClick=()中，我简单地使用访问了产品的唯一 idrow.id