onClick 이벤트 바인딩에서 매개 변수를 전달하는 방법은 무엇입니까?

Question

ListItem에 onClick 이벤트를 설정했습니다. 그런 다음 호출 된 메소드에 .bind을 호출하여 클릭 된 목록 항목의 ID 및 이름 값을 전달합니다.

다음 SO question은 bind를 사용하여 제안했지만 ListItem에 onCLick 이벤트를 추가하면 목록 바인딩이 깨집니다.

클릭 이벤트를 추가하기 전에 asset.name에 대한 목록 범위 바인딩이 예상대로 작동하고 목록이 채워집니다.

또한 매개 변수없이 onClick={this._onAssetSelected()을 시도하면 click 이벤트가 작동하지 않습니다.

질문 : JSX에 onClick 이벤트 바인딩에

어떻게 전달할 수있는 매개 변수?

목록 정의 : 클릭 이벤트에서 호출

   <List selectable={true} selected={0}> 
       { 

        this.state.data.map(function (asset) { 
         return (
          <ListItem justify="between" onClick={this._onAssetSelected.bind(this, asset.name, asset.id)} > 
           <span>{asset.name}</span> 
          </ListItem> 
         ); 
        }) 

       } 
       </List> 

방법 :

_onAssetSelected(assetName, assetID) { 

    console.log(assetName); 
    console.log(assetID);  


    } 

Answer 1

당신은이 작업을 수행 할 수 있습니다. anonymous 함수를 콜백으로 정의하십시오.이 함수는 매개 변수를 사용하여 메서드를 호출합니다. Hop ut이 도움이됩니다!

<List 
    selectable={true} 
    selected={0}> 
    { 

    this.state.data.map(function (asset) { 
     return (
      <ListItem 
       justify="between" 
       onClick={(e) => this._onAssetSelected(asset.name, asset.id, e)} > 
       <span>{asset.name}</span> 
      </ListItem> 
     ); 
    }) 

    } 
</List>