如何在Bootstrap React Table中特定列下的每一行内添加按钮? [英] How to add a button inside every row under a particular column in Bootstrap React Table?

问题描述

我有一个React Bootstrap表( http://allenfang.github. io/react-bootstrap-table/index.html )，它将从API传入的数据中填充.我想将按钮添加到其中一列，然后对其执行操作. 例如，在特定行中单击按钮后，我需要从特定行中提取数据，然后进行API调用. 上面如何使用React Bootstrap表?

I have a React Bootstrap table(http://allenfang.github.io/react-bootstrap-table/index.html) which will get populated from data coming in from an API. I want to add a button to one of the columns and then perform operations on it. For example, once the button is clicked in a particular row, I need to extract data from the particular row and then make an API call. How to the above using React Bootstrap table?

    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>

推荐答案

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

You can write a custom dataformatter:

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>

这篇关于如何在Bootstrap React Table中特定列下的每一行内添加按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！