如何在Bootstrap React Table中特定列下的每一行內添加按鈕？

Question

我有一個React Bootstrap表（ http://allenfang.github.io/react-bootstrap-table/index.html ），該表將從API傳入的數據中填充。 我想將按鈕添加到其中一列，然后對其執行操作。 例如，在特定行中單擊按鈕后，我需要從特定行中提取數據，然后進行API調用。 上面如何使用React Bootstrap表？

    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>

Answer 1

您可以編寫自定義數據格式程序：

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

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

並在列中：

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

Answer 2

按類別選擇列，也可以使用查詢選擇器

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

遍歷它們，向每個按鈕添加按鈕。 根據需要編輯按鈕的屬性。

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