blog
blog copied to clipboard
chenxiaochun
Ant Design TreeSelect 组件的显示隐藏事件
有这样一种场景，在使用 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 源链接：https://github.com/ant-design/ant-design/issues/10913
