Office Fabric用户界面-我打包解决方案时,onClick IconButton不起作用

Cap*_*apa 1 button office-ui-fabric spfx

我有下表: 在此处输入图片说明

行是动态绘制的,还有删除每行的按钮。

<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);
}
Run Code Online (Sandbox Code Playgroud)

问题是,每次我在控制台中单击删除按钮时,都会向我显示:

在此处输入图片说明

因此,我无法访问Button Id属性,但这仅在发布Webpart时发生。有谁知道如何解决?

谢谢!

小智 5

在IconButton的onClick中,您可以编写以下内容;

onClick={() => {this._removeItemFromDetail(detail.Id)}}
Run Code Online (Sandbox Code Playgroud)

这应该允许您接受ID作为参数。如果仍然需要_removeItemFromDetail方法中的“事件”,则可以按如下所示添加它:

onClick={(event) => {this._removeItemFromDetail(event, detail.Id)}}
Run Code Online (Sandbox Code Playgroud)

这意味着您的方法将如下所示;

private _removeItemFromDetail(event, itemId) {
    console.log("itemId: " + itemId); 
}
Run Code Online (Sandbox Code Playgroud)