繁体   English   中英

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

[英]How to add row specific action buttons in react-bootstrap-table2 (React.js)

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

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

and rendered a separate table for each object in this.state.data and filled with the data from the products array from the corresponding object using this.state.data.map((category, index) =>..) . 我还设置了每个表的id以匹配this.state.data的 object 的索引,从它们被渲染的地方。

但我挣扎的是,我想为每一行添加一个删除按钮; 搜索时,我发现了为我们提供cell, row, rowIndexcolumnsformatter属性,但我如何访问表的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>
    }
  }
}

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

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM