通过反应中的按钮获取行数据-bootstrap-table

Question

我正在使用 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());
    });

Answer 1

您可以将其作为参数传递给 _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>        
}

这里有一个fiddle来演示：https://jsfiddle.net/omerts/5asms7j7/

通过反应中的按钮获取行数据-bootstrap-table

get the row data by a button in a react-bootstrap-table

jquery

reactjs

react-bootstrap-table