button - Office Fabric UI - onClick IconButton 在打包解决方案时不起作用

标签 button office-ui-fabric spfx

我有下表:enter image description here

行以动态方式绘制,还有用于删除每一行的按钮。

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

问题是每次我点击控制台中的删除按钮时,它都会显示:

enter image description here

因此,我无法访问 Button Id 属性,但这只会在我发布 Web 部件时发生。 有谁知道如何修复它?

谢谢!

最佳答案

在 IconButton 的 onClick 中你可以这样写;

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

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

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

这意味着您的方法看起来像这样;

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

关于button - Office Fabric UI - onClick IconButton 在打包解决方案时不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47104630/

相关文章:

reactjs - 突出显示导航 Pane 的选定项目

javascript - 删除受控文本字段中的所有文本后,如何使受控文本字段再次为空? SPFX React/TypeScript

java - Android 动态按钮布局

ios - Xcode 更新到 4.5 版后按钮不起作用

css - 办公室用户界面结构 react : loadTheme to change global CSS?

javascript - 清空下拉选择office-ui-fabric react组件

javascript - 没有正确使用 react 生命周期

reactjs - 从下拉 Office Fabric ui 中获取 selectedKey

flutter - 如何在 flutter 中实现超时按钮

javascript - 如何在用户按住按钮时重复执行功能?