我正在使用react-bootstrap-table(var ReactBsTable = require(" react-bootstrap-table"))。
我尝试添加一个按钮,在单击时显示与该按钮行对应的id或行数据。
我使用了jquery,但我给了一个id按钮,但是所有这些按钮都有相同的id(validatebutton),所以只有第一个工作,其余的没有,因为我不能为许多组件提供相同的id。
请知道。
<BootstrapTable data={this.state.activities} pagination={true} hover={true} search={true} selectRow={selectRowProp} options={options}>
<TableHeaderColumn isKey={true} dataField="id" hidden {true}>ID</TableHeaderColumn>
<TableHeaderColumn dataField="title" dataSort={true}>Title</TableHeaderColumn>
<TableHeaderColumn dataField="adress" dataSort{true}>Adress</TableHeaderColumn>
<TableHeaderColumn dataField="button" dataFormat={this.buttonFunction}></TableHeaderColumn>
</BootstrapTable>
buttonFunction: function (cell, row) {
var today = new Date().toISOString();
if (row.status === "En cours") {
if (row.dateEnd > today) {
return <Alert_Validate></Alert_Validate>;
} else {
return <label>
<button type="button" id="validatebutton" onClick= {this._validateFunction} className="bbtn btn-primary btn-sm"><i className="fa fa-check fa-1x" aria-hidden="true"></i>
</button>
</label>
}
}
},
_validateFunction: function () {
var userid=this.props.params.id;
$("#validatebutton").click(function() {
var $row = $(this).closest("tr");
var activityid = $row.find("td:nth-child(2)");
console.log("activity id :"+activityid.text());
});
答案 0 :(得分:0)
您可以将其作为参数传递给_validateFunction,而不是通过DOM搜索数据:
buttonFunction(cell, row) {
return <label>
<button type="button"
id="validatebutton"
onClick={() => {this._validateFunction(row)}}
className="bbtn btn-primary btn-sm">
Click Me
</button>
</label>
}
这是一个演示它的小提琴:https://jsfiddle.net/omerts/5asms7j7/