Ant Design TreeSelect 组件的显示隐藏事件

[chenxiaochun]

有这样一种场景，在使用 TreeSelect 组件进行多项选择时，想等用户选择完成之后，鼠标点击其它区域隐藏下拉层时，再去触发下一步的操作。

Ant 的官方文档并没有提供相关的方法，后来经过 issue 询问，官方的开发者给了一个此组件的内部方法：

onDropdownVisibleChange(visibled){
  console.log(visibled)
  return true
}

参数visibled用来判断当前组件下拉层的显示状态：

• false表示当前下拉层为隐藏状态
• true表示当前下拉层为显示状态

此方法最后的return true，表示允许下拉层进行显示/隐藏切换。如果return false就是禁止当前下拉层的切换操作。具体你可以自己尝试一下。

此时，解决上面我们提到的问题，就会变得非常简单：

onDropdownVisibleChange(visibled){
  if(visibled === false){
    //用户隐藏了下拉层，进行下一步操作
  }
  return true
}

个人觉得此方法设计的优雅之处在于，用一个方法就处理了下拉层显示/隐藏的两个回调场景。但是，如果你想拿到当前 TreeSelect 的值，就还必须去用onChange方法了。

issue 源链接：ant-design/ant-design#10913

[zhaocaixia-afk]

这么使用的，我这里不行呢

[chenxiaochun]

@zhaocaixia-afk 我这个当时还是3.0的版本，现在4.0可能不支持了吧