React - Parametrelerle aynı sınıftaki olaylar

Question

Tablo oluşturmak için Reactable kullanıyorum. İşlem kutusuna tıklandığında, stili değiştirerek o satır hakkında görünecek ek bilgi içeren bir kutu istiyorum. Bu benim kod şimdiye kadar geçerli:

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

nasıl handleClick bir parametre iletebilirsiniz?

Answer 1

İşlev çağırıldığında çağrılacak argümanları eklemek için function.bind()'u kullanabilirsiniz.

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

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

Bir map() callback'inde içine render olduğundan da geri arama bağlamak zorunda:

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

---

Yoksa ES6 kullanırsanız bind gerek önlemek için ok fonksiyonlar yazabilir:

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

Ve işleyiciniz wh olarak bir satır içi ok işlevi yazabilirsiniz. Ich başka bir bağımsız değişken ile işleve yoluyla aramaları:;: SelLines [tableRow.ID] = Gerçek

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