반응 부트 스트랩 테이블의 버튼으로 행 데이터 가져 오기

react-bootstrap-table (var ReactBsTable = require ("react-bootstrap-table"))을 사용하고 있습니다.
이 버튼 행에 해당하는 ID 또는 행 데이터를 클릭하여 표시하는 버튼을 추가하려고했습니다. jquery를 사용했지만 버튼에 ID를 지정했지만 모든 버튼에 동일한 ID (validatebutton)가 있으므로 첫 번째 작업과 나머지 작업은 여러 구성 요소에 대해 동일한 ID를 가질 수 없기 때문에 불가능합니다.반응 부트 스트랩 테이블의 버튼으로 행 데이터 가져 오기

아무쪼록. 대신 DOM을 통해 데이터를 검색

<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()); 
    });

출처

2016-06-08 ShMswi

, 당신은 당신의 _validateFunction에 매개 변수로 전달할 수 : https://jsfiddle.net/omerts/5asms7j7/

출처

2016-06-08 15:48:45 omerts

을 정말 감사 : 여기

buttonFunction(cell, row) { return <label> <button type="button" id="validatebutton" onClick={() => {this._validateFunction(row)}} className="bbtn btn-primary btn-sm"> Click Me </button> </label> }

하면을 보여주기 위해 바이올린입니다 당신의 도움 # # omerts. 그것은 나에서 작동합니다. 내가 왜 사용하는지 (onClick = {() => {this._validateFunction (row)}})와 (onClick = {{this._validateFunction (row)}} }). Tnk you – ShMswi

후자를 사용하면 클릭을 기다리지 않고 바로 함수를 호출 할 수 있으며 함수의 결과는 onClick 처리기에 저장됩니다. 첫 번째 메서드는 기본적으로 _validateFunction에 대한 호출을 래핑하는 익명의 함수를 만들고 사용자가 클릭 할 때만 _validateFunction을 발생시킵니다. es5에서는 onClick = {(function() {this._validateFunction}). bind (this)}가됩니다. (Using() => auto는이 var를 자동으로 바인딩합니다). – omerts

대답 해주세요. – ShMswi

반응 부트 스트랩 테이블의 버튼으로 행 데이터 가져 오기

답변

관련 문제