0

API から入ってくるデータから入力されるReact Bootstrap テーブル ( http://allenfang.github.io/react-bootstrap-table/index.html ) があります。列の 1 つにボタンを追加して、それに対して操作を実行したいと考えています。たとえば、特定の行でボタンがクリックされたら、特定の行からデータを抽出して 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>
4

2 に答える 2

0

クラスごとに列を選択するか、クエリセレクターを使用できます

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

それらをループして、それぞれにボタンを追加します。必要に応じてボタンのプロパティを編集します。

for(var i = 0; i < column.length; i++){
 column[i].innerHTML += "<button></button>";
}
于 2017-09-28T09:23:04.603 に答える