So erhalten Sie Daten aus der Tabellenzeile Klicken Sie auf Semantic's React Table Component

Question

Ich versuche, einen Wert auf klicken aus einer Tabelle, die ich Rendern mit Semantic UI mit React. Ich erzeuge meine Zeile mit einer unveränderlichen Liste und ich möchte einen onclick, der Zugriff auf einen eindeutigen ID-Wert gibt. Als ich meinen Versuch, melden Sie sich den Wert in meinem Rückruf zu extrahieren, die ich erhalten:

'bff3a3e9-489e-0e19-c27b-84c10db2432b' eingewickelt in einem td-Tag

Relevante Code:

handleRowClick = (scen) => { 
 
    console.log(Object.keys(scen.target)); 
 
    console.log(scen.target.); 
 
    } 
 

 
    mapScenarios =() => { 
 
     return ((scen, i) => { 
 
     return(
 
      <Table.Row key = {scen.get('id')} onClick = {this.handleRowClick}> 
 
      <Table.Cell 
 
       children={scen.get('id') || '(No ID)'} 
 
      /> 
 
      <Table.Cell 
 
       children={scen.get('name') || '(No Name)'} 
 
      /> 
 
      <Table.Cell 
 
       children={scen.get('actions').size === 0 ? 'none' : `${scen.get('actions').size} action(s)`} 
 
      /> 
 
      </Table.Row> 
 
     ) 
 
     }) 
 
    }

Answer 1

Mit Semantik-UI für reagieren, ist der Zeilenklick nicht gut implementiert. Beim Klicken auf Zeile erhält man tatsächlich den Wert der Zelle aus dieser Zeile, was nicht das ist, was ich wollte, aber ich dachte, es funktionierte, weil ich auf die Zelle klickte, die die ID enthielt. Hier ist die Problemumgehung.

<Table.Row key = {scen.get('id')} onClick={() => this.props.tableRowClickFunc(scen.get('id'))}>