Javascript 如何在引导表中特定列下的每行中添加按钮？

我有一个React Bootstrap table（），它将根据来自API的数据填充。我想在其中一列中添加一个按钮，然后对其执行操作。 例如，单击特定行中的按钮后，我需要从特定行提取数据，然后进行API调用。 如何使用React引导表执行上述操作

    return (
  <BootstrapTable
    condensed={true}
    data = { tableData } 
  //I use tableData to store information obtained from API

    headerStyle={ { 
      background: '#FFF',
    } }
    containerStyle={ { background: '#FFF' } }
    ref='table'
    >
      <TableHeaderColumn dataField='resourceId' isKey dataAlign='center' dataSort={ true }> ID </TableHeaderColumn>
      <TableHeaderColumn dataField='Name' dataAlign='center'> Name </TableHeaderColumn>
      <TableHeaderColumn dataField='support' dataAlign='center' dataSort={ true }> Support</TableHeaderColumn>
      <TableHeaderColumn dataField='status' dataAlign='center' dataSort={ true }> Status</TableHeaderColumn>


      <TableHeaderColumn 
        dataAlign='center'
        options={ 
      <button> Select </button>}
      >
      File Path
      </TableHeaderColumn>
//Insert button here and access onClick property and make relevant API calls

  </BootstrapTable>

返回(
身份证件
名称
支持
地位
文件路径
//在此处插入按钮，访问onClick属性并进行相关API调用

按类或使用查询选择器选择列

var column = document.querySelectorAll("tableHeaderColumn");

将按钮添加到每个按钮中，循环浏览它们。根据需要编辑按钮的属性

for(var i = 0; i < column.length; i++){
 column[i].innerHTML += "<button></button>";
}

for（变量i=0；i

您可以编写自定义数据格式化程序：

class ActionFormatter extends React.Component {
  render() {
    return (
      <button onClick={this.props.onClick}>Click me!</button>
    );
  }
}

function actionFormatter(cell, row) {
  return (
    <ActionFormatter onClick={()=>doAction(row)} />
  );
}

类ActionFormatter扩展了React.Component{
render（）{
返回(
点击我！
);
}
}
函数actionFormatter（单元格、行）{
返回(
doAction（行）}/>
);
}

在专栏中：

<TableHeaderColumn dataField='action' dataFormat={ actionFormatter }>Action</TableHeaderColumn>

动作