사무실 패브릭 UI - 온 클릭 IconButton가 작동하지 않을 때 패키지 솔루션

Question

나는 다음과 같은 테이블이 :

행 동적 방식으로 그려 또한 버튼은 각 행을 삭제합니다.

<span className="ms-Table-cell"> 
    <div> 
    <IconButton 
     onClick= { this._removeItemFromDetail } 
     id={ detail.Id.toString() } 
     iconProps={ { iconName: 'Cancel' } } 
     title='Delete' /> 
    </div> 
</span> 

private _removeItemFromDetail(e) { 
    console.log("e.target",e.target); 
} 

문제는 내가 콘솔에서 삭제 버튼을 클릭 할 때마다 그것이 나를 보여주고 있다는 것입니다 : 그래서

, 내가 버튼 아이디 속성에 액세스 할 수 있지만 이것은 단지 발생 Webpart를 게시 할 때 누구나 해결 방법을 알고 있습니까?

감사합니다.

Answer 1

IconButton의 onClick에서 다음을 작성할 수 있습니다.

onClick={() => {this._removeItemFromDetail(detail.Id)}} 

ID를 매개 변수로 허용해야합니다. 여전히 _removeItemFromDetail 메서드에 "이벤트"가 필요한 경우 다음과 같이 추가 할 수 있습니다.

onClick={(event) => {this._removeItemFromDetail(event, detail.Id)}} 

이는 귀하의 방법이 다음과 같이 표시됨을 의미합니다.

private _removeItemFromDetail(event, itemId) { 
    console.log("itemId: " + itemId); 
}