変数をonClick in Reactに渡す

Question

Reactを使用してUIを開発しています（少なくとも今のところ）とhasタグを持つMaterial-UIを使用しています。 ListItem内で、アイコンのクリックを検出したい。問題は私のリストにはいくつかのリスト項目があり、リストハンドのインデックスをクリックハンドラに渡したいのです。しかし、私はまた、クリックイベント自体を渡す必要があります。私のコードは次のようになります。

は

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

それでは、どのように私は私がhandleClickDeleteIcon（e）の内部で使用することができます（リストインデックスまたはいくつかのユニークなIDなど）の変数に渡すために各rightIconためのonClickを使用することができますか？イベントeを取得するにはhandleClickDeleteIconが必要なので、e.stopPropagation（）を呼び出すことはできません。

Answer 1

あなたは匿名関数を作成し、このように、のparamsを使用して関数を呼び出すことができます。

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