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

chenxiaochun commented 6 years ago

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

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

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

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

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

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

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

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

zhaocaixia-afk commented 2 years ago

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

chenxiaochun commented 2 years ago

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

chenxiaochun / blog