学习者问题：如何将消息栏 (Fabric UI) 中的按钮与功能相关联？

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

您应该能够像这样向 Button 添加点击处理程序：

<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

学习者问题：如何将消息栏 (Fabric UI) 中的按钮与功能相关联？

Learner Question: How would I associate a button within a message bar (Fabric UI) with a function?

reactjs

spfx