React - Ereignisse in derselben Klasse mit Parametern

Question

Ich benutze Reactable, um eine Tabelle zu erstellen. Wenn ich auf die Aktionsleiste klicke, möchte ich eine Box mit zusätzlichen Informationen über diese Zeile anzeigen, indem ich den Stil ändere. Dies ist mein Code so weit:

var SelLines = new Object(); 
var Home = React.createClass({ 

    handleClick: function(e) { 
     console.log("##Clicked##"); 
    }, 

    render: function() {  
     var tableRows = Data.map(function(tableRow) { 
      console.log(tableRow); 
      SelLines[tableRow.ID] = false; 
      console.log(SelLines); 
      if (SelLines[tableRow.ID]) { 
       return (
        <Tr> 
         <Td column="ID">{tableRow.ID}</Td> 
         <Td column="DESCRIPTION">{tableRow.DESCRIPTION}</Td> 
         <Td className="cellSelected" column="ACTION"><a onClick={SelLines[tableRow.ID] = true;Home.handleClick}>{tableRow.ACTION}</a></Td> 
         //// = true;Home.h ## not working 
        </Tr> 
       ); 
      } else { 
       return (
        <Tr> 
         <Td column="ID">{tableRow.ID}</Td> 
         <Td column="DESCRIPTION">{tableRow.DESCRIPTION}</Td> 
         <Td className="cellNotSelected" column="ACTION"><a onClick={Home.handleClick}>{tableRow.ACTION}</a></Td> 
        </Tr> 
       ); 
      } 
     }); 
     return (
      <div> 
       <div> 
        <Table className="table" id="table"> 
         <Thead> 
          <Th column="ID"> 
           <strong className="ID-header">ID</strong> 
          </Th> 
          <Th column="DESCRIPTION"> 
           <em className="DESCRIPTION-header">DESCRIPTION</em> 
          </Th> 
          <Th column="ACTION"> 
           <em className="ACTION-header">ACTION</em> 
          </Th> 
         </Thead> 
         {tableRows} 
        </Table> 
       </div> 
      </div> 
     ); 
    } 
}); 

Wie kann ich einen Parameter handelt passieren?

Answer 1

Sie können function.bind() verwenden, um Argumente voranzustellen, die aufgerufen werden sollen, wenn die Funktion aufgerufen wird.

<a onClick={this.handleClick.bind(this, tableRow.ID)}>{tableRow.ACTION}</a> 

handleClick: function(tableRowId, e) { 
    SelLines[tableRowId] = true; 
    console.log("##Clicked##", tableRowId); 
} 

Da Sie in einem map() Rückruf Rendern Sie müssen auch den Rückruf binden:

var tableRows = Data.map(function(tableRow){ 
    // ... 
}.bind(this)); 

---

Oder wenn Sie ES6 verwenden, können Sie den Pfeil-Funktionen schreiben, um bind um zu vermeiden:

var tableRows(Data.map((tableRow) => { 
    // ... 
}); 

Und Sie können eine Inline-Pfeil-Funktion als Ihre Handler wh schreiben ich Anrufe mit einigen Argumenten zu einer anderen Funktion durch:

<a onClick={(e) => this.handleClick(tableRow.ID)}>{tableRow.ACTION}</a>