Reactjs react引导表中的Add按钮

我正在使用react引导表（

var ReactBsTable=require（“react引导表”）

）

我想在bootstraptable中添加一个只包含按钮的列

有什么想法吗，谢谢

<BootstrapTable data={this.state.activities} pagination={true} hover={true} search={true} selectRow={selectRowProp} options={options}>
  <TableHeaderColumn isKey={true} dataField="id" hidden {true}>ID</TableHeaderColumn>
  <TableHeaderColumn dataField="title" dataSort={true}>Title</TableHeaderColumn>
  <TableHeaderColumn dataField="adress" dataSort{true}>Adress</TableHeaderColumn>
  ///I dont know if here or there is option to use
 </BootstrapTable>

身份证件
标题
地址
///我不知道这里是否有使用的选项

我试图添加一个按钮，显示与此按钮对应的id或行数据。 我使用了jquery，但是我给了按钮一个id，但是所有这些按钮都有相同的id，所以只有第一个可以工作，其余的不行

<BootstrapTable data={this.state.activities} pagination={true} hover={true} search={true} selectRow={selectRowProp} options={options}>
  <TableHeaderColumn isKey={true} dataField="id" hidden {true}>ID</TableHeaderColumn>
  <TableHeaderColumn dataField="title" dataSort={true}>Title</TableHeaderColumn>
  <TableHeaderColumn dataField="adress" dataSort{true}>Adress</TableHeaderColumn>
  <TableHeaderColumn dataField="button" dataFormat={this.buttonFunction}></TableHeaderColumn>

 </BootstrapTable>

buttonFunction: function (cell, row) {
        var today = new Date().toISOString();
        if (row.status === "En cours") {
            if (row.dateEnd > today) {
                return <Alert_Validate></Alert_Validate>;
            } else {
                return <label>
                    <button type="button" id="validatebutton" onClick={this._validateFunction} className="bbtn btn-primary btn-sm"><i className="fa fa-check fa-1x" aria-hidden="true"></i>
                    </button>
                </label>

            }
        }
    },

_validateFunction: function () {
        var userid=this.props.params.id;
        $("#validatebutton").click(function() {
            var $row = $(this).closest("tr");
             var activityid = $row.find("td:nth-child(2)");
            console.log("activity id :"+activityid.text());
        });

身份证件
标题
地址
按钮功能：功能（单元格、行）{
var today=新日期（）.toISOString（）；
如果（行状态==“正常”）{
如果（row.dateEnd>today）{
返回；
}否则{
返回
}
}
},
_validateFunction:函数（）{
var userid=this.props.params.id；
$（“#验证按钮”）。单击（函数（）{
var$row=$（this.closest（“tr”）；
var-activityid=$row.find（“td:nth-child（2）”；
log（“活动id:+activityid.text（））；
});

您可以创建一个新函数

buttonFormatter

将按钮添加到列的每个单元格中

// products will be presented by react-bootstrap-table
var products = [{
  id: 1,
  name: "Item name 1",
  price: 100
},{
  id: 2,
  name: "Item name 2",
  price: 100
},........];

// It's a data format example.
function priceFormatter(cell, row){
  return '<i class="glyphicon glyphicon-usd"></i> ' + cell;
},
function buttonFormatter(cell, row){
  return '<BootstrapButton type="submit"></BootstrapButton>';
}

React.render(
  <BootstrapTable data={products} striped={true} hover={true}>
      <TableHeaderColumn dataField="id" isKey={true} dataAlign="center" dataSort={true}>Product ID</TableHeaderColumn>
      <TableHeaderColumn dataField="name" dataSort={true}>Product Name</TableHeaderColumn>
      <TableHeaderColumn dataField="price" dataFormat={priceFormatter}>Product Price</TableHeaderColumn>
      <TableHeaderColumn dataField="button" dataFormat={buttonFormatter}>Buttons</TableHeaderColumn>
  </BootstrapTable>,
    document.getElementById("app")
);

//产品将通过react引导表显示
var乘积=[{
id:1，
名称：“项目名称1”，
价格:100
},{
id:2，
名称：“项目名称2”，
价格:100
},........];
//这是一个数据格式的例子。
函数价格格式化程序（单元格、行）{
返回“”+单元格；
},
功能按钮信息表（单元格、行）{
返回“”；
}
反应(
产品ID
品名
产品价格
按钮
,
document.getElementById（“应用程序”）
);

我也遇到过类似的情况，我实现了这段代码，希望它能帮助您

var-dataFake=[
{
名称：“产品1”，
价格单位：23.50
},
{
名称：‘产品2’，
价格单位：24.50
},
{
名称：‘产品3’，
价格单位：33.20
}];
类产品扩展了React.Component{
onClickProductSelected（单元格、行、行索引）{
console.log（'Product#'，rowIndex）；
}
cellButton（单元格、行、枚举对象、行索引）{
返回(
this.onClickProductSelected（单元格、行、行索引）}
>
单击我{行索引}
)
}
render（）{
返回(
名称
价格
)
}
}
ReactDOM.render(
,
document.getElementById（'容器'）
);

也许我没有很好地解释我的问题。我需要在每行的列中而不是在标题中使用按钮。我需要在单击按钮时获取单元格或行。有什么想法吗？请解释您要构建的体系结构？您想在哪里访问您的

单元格

和

行

？您已经可以在

按钮信息表

方法中访问它们了。尝试在同一个函数中加入一些逻辑。无论如何，我建议您使用

react bootstrap

，因为它非常简单，而且它的文档非常好。您只能从

react bootstrap

导入

table

，因此应用程序的大小不会成为问题。@iamsaksham我也有类似的问题，我希望有条件地显示按钮。我试图比较数据库中对象的

id

，并将它们与

行.id

进行比较。根据结果，我想显示一个不同的按钮。你能看看我的SO问题吗：你知道如何在react-boostrap-table2上归档吗？我有一个类似的问题，我想有条件地显示按钮。我试图比较数据库中对象的

id

，并将它们与

行.id

进行比较。根据结果，我想显示一个不同的按钮。你能看一下我的SO问题吗：这帮助我解决了“This”绑定，以便能够从按钮渲染器中为dataFormat调用另一个函数。谢谢你的例子！

var dataFake = [
{
  name: 'Product 1',
  priceUnit: 23.50
},
{
  name: 'Product 2',
  priceUnit: 24.50
},
{
  name: 'Product 3',
  priceUnit: 33.20
}];


class Products extends React.Component {
  onClickProductSelected(cell, row, rowIndex){
   console.log('Product #', rowIndex);
  }

  cellButton(cell, row, enumObject, rowIndex) {
    return (
       <button 
          type="button" 
          onClick={() => 
          this.onClickProductSelected(cell, row, rowIndex)}
       >
       Click me { rowIndex }
       </button>
    )
 }

 render() {
   return (
    <BootstrapTable data={this.props.data}>
     <TableHeaderColumn dataField='name' isKey>
        Name
      </TableHeaderColumn>
      <TableHeaderColumn dataField='priceUnit'>
        Price
      </TableHeaderColumn>
      <TableHeaderColumn
        dataField='button'
        dataFormat={this.cellButton.bind(this)}
      />
   </BootstrapTable>
  )
 }
}



ReactDOM.render(
   <Products data={dataFake} />,
   document.getElementById('container')
);