Office ui构造中的多选下拉列表折叠时显示消息

Question

有没有办法知道多选下拉列表何时折叠？我有一个多选下拉列表，如下所示：

取消选择所有选项后，下拉菜单仍保持展开状态，如上图所示。在下拉菜单之外的屏幕上单击其他位置时，它会折叠。当下拉列表崩溃时，我需要执行一些操作（例如，显示一条消息）。有没有办法知道多选下拉列表何时折叠？

我可以改为使用onBlur。但是，我需要在Dropdown之外单击两次以打印消息。

<Dropdown
options={[
{ key: 'A', text: 'Option a' },
{ key: 'B', text: 'Option b' },
{ key: 'C', text: 'Option c' }
]}
multiSelect={true}
onBlur={this.onFilterDropDownDismiss}
/>

private onFilterDropDownDismiss = (): void => {
console.log("Dismissed");
}

但是，我需要在外部单击一下显示消息。请告诉我是否有解决此问题的建议。

Answer 1

IDropdownProps.onDismiss事件可用于解决此问题：

  

取消取消选项标注后的回调问题

<Dropdown
      options={[
        { key: 'A', text: 'Option a' },
        { key: 'B', text: 'Option b' },
        { key: 'C', text: 'Option c' }
      ]}
      multiSelect={true}
      onDismiss={this.onFilterDropDownDismiss}
    />


private onFilterDropDownDismiss = (): void => {    
   console.log("Dismissed");
}

这里是demo供您参考