변수를 onClick in React로 전달하십시오.

Question

React를 사용하여 UI를 개발 중이며 (적어도 현재는) 및 태그가있는 Material-UI를 사용하고 있습니다. ListItem 내부에서 아이콘 클릭을 감지하고 싶습니다. 문제는 내 목록에 여러 개의 listitem이 있고, listite의 색인을 내 클릭 핸들러에 전달하려고합니다. 그러나 나는 또한 click 이벤트 자체를 전달해야합니다. 내 코드는 다음과 같습니다

이

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 (예) 내에서 사용할 수 있습니다 (목록 인덱스 또는 일부 고유 ID와 같은) 변수를 전달하기 위해 각 rightIcon을위한 온 클릭을 사용할 수 있습니까? 이벤트 e를 얻으려면 handleClickDeleteIcon이 필요하므로 e.stopPropagation()을 호출 할 수 없습니다.

Answer 1

당신은 익명 함수를 작성하고 다음과 같이 PARAMS으로 함수를 호출 할 수 있습니다 :

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