Übergeben Sie die Variable an onClick in React

Question

Ich entwickle meine Benutzeroberfläche mit React und (zumindest jetzt) ​​mit Material-UI, die und Tags hat. Innerhalb von ListItem möchte ich einen Klick auf ein Symbol erkennen. Das Problem ist, dass meine Liste eine Anzahl von Listenelementen enthält und ich den Index der Liste in meinen Klick-Handler übernehmen möchte. Aber ich muss auch das Click-Ereignis selbst einreichen. Mein Code sieht wie folgt aus:

class SomeList extends React.Component { 

    handleClickDeleteIcon(e) { 
     e.stopPropagation(); 
     console.log('Fired handleClickDeleteIcon()!'); 
    } 

    everywhereClickFunction(e) { 
     console.log('Fired everywhereClickFunction()!'); 
    } 

    render() { 
     return (
      <List> 
       <Subheader inset={true}>Some Files</Subheader> 
       <ListItem 
       leftAvatar={<Avatar icon={<ActionAssignment />} backgroundColor={blue500} />} 
       rightIcon={ 
        <div onClick={this.handleClickDeleteIcon}> 
         <DeleteForever /> 
        </div> 
       } 
       primaryText="Vacation itinerary" 
       secondaryText="Jan 20, 2014" 
       onTouchTap={this.everywhereClickFunction} 
       onClick={this.everywhereClickFunction} 
       /> 
       <ListItem 
       leftAvatar={<Avatar icon={<ActionAssignment />} backgroundColor={blue500} />} 
       rightIcon={ 
        <div onClick={this.handleClickDeleteIcon}> 
         <DeleteForever /> 
        </div> 
       } 
       primaryText="Kitchen remodel" 
       secondaryText="Jan 10, 2014" 
       /> 
       <ListItem 
       leftAvatar={<Avatar icon={<ActionAssignment />} backgroundColor={blue500} />} 
       rightIcon={ 
        <div onClick={this.handleClickDeleteIcon}> 
         <DeleteForever /> 
        </div> 
       } 
       primaryText="Something else" 
       secondaryText="Nov 08, 2017" 
       /> 
      </List> 
     ); 
    } 
); 

So wie kann ich onClick für jede rightIcon verwenden in einer Variablen zu übergeben (wie eine Liste Index oder an einen einzigartigen ID), die ich innerhalb handleClickDeleteIcon (e) verwenden kann? Beachten Sie, dass ich handleClickDeleteIcon brauche, um auch das Ereignis e zu erhalten, so dass ich e.stopPropagation() nicht aufrufen kann.

Answer 1

Sie können eine anonyme Funktion und rufen Sie Ihre Funktion mit params, wie diese erstellen:

<div onClick={e => this.handleClickDeleteIcon(e, index)}> 
    <DeleteForever /> 
</div>