如何在Bootstrap React Table中特定列下的每一行内添加按钮? [英] How to add a button inside every row under a particular column in Bootstrap React Table?
本文介绍了如何在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屋!
查看全文