Question

我正在使用MS Fabric的消息栏，正在寻找关闭该消息栏的方法。这是当前代码：

public ChangeWarn = (p: IWarnProps) => (
    <MessageBar
    messageBarType={MessageBarType.warning}
    isMultiline={true}
    dismissButtonAriaLabel="Close"
    onDismiss={() => this._onWarnDismiss()}
    overflowButtonAriaLabel="See more"
    truncated={true}
    actions={
      <div>
        <MessageBarButton>OK</MessageBarButton>
      </div>
  }
> Warning.
</MessageBar>

)

public _onWarnDismiss() {
  this.setState({
    ClickCounter: 0
  });
}

onDismiss可以工作，但是我也希望按钮也可以消除该条。我的JS基础知识让我失望了，所以如果有人可以建议？

Answer 1

您应该可以像这样向按钮添加点击处理程序：

<MessageBarButton onClick={() => this._onWarnDismiss()}>OK</MessageBarButton>

Answer 2

如果您想在单击按钮时关闭消息栏，则无法再渲染它：

public ChangeWarn = (p: IWarnProps) => (
    {this.state.showMessagebar && 
    <MessageBar
    messageBarType={MessageBarType.warning}
    isMultiline={true}
    dismissButtonAriaLabel="Close"
    onDismiss={() => this._onWarnDismiss()}
    overflowButtonAriaLabel="See more"
    truncated={true}
    actions={
      <div>
        <MessageBarButton onClick={() => this._dismissWarning()}>OK</MessageBarButton>
      </div>
  }
> Warning.
</MessageBar>}
)

public _onWarnDismiss() {
  this.setState({
    ClickCounter: 0
  });
}

public _dismissWarning() {
  this.setState({
    ClickCounter: ,
    showMessagebar: false,
  });
}

我希望能对您有所帮助，

打招呼乔！

有关更多与SharePoint开发相关的信息，请查看here

学习者问题：如何将消息栏（结构UI）中的按钮与功能关联？

2 个答案: