11月07, 2016

Antd中TreeSelect组件过滤的问题

Antd 是阿里蚂蚁金服开源的一套基于React的前端UI组件,功能很丰富,文档也很全,给React开发带来了很大的便利。现在的项目中我们也在用Antd,但是,其中的坑也不少,现在记录一下,供其他同学参阅。

问题重现

See the Pen antd-treeselect-filter by flyingzl (@flyingzl) on CodePen.

上面的代码有两个问题

  • 在文本框空输入14,会过滤出channel_14, 点击选择,然后会发现文本框中同时出现全部channel_14,同时过滤字符串14依然在文本框中。如下图所示:

image

  • 清除文本框中的内容,输入过滤字符串'a', 会过滤出所有的内容,但是第一项却被高亮了,其他项没有高亮,如下图所示:

image

解决方案

对于问题1, 我们只需要在TreeSelect中设置inputValue={null}即可,这个文档中没有,算是一个隐藏功能。

对于问题2, 参考TreeSelect的文档 我们可以看到, 默认情况下进行过滤时,我们是对TreeNode的value值进行过滤, 也就是说treeNodeFilterProp的默认值为value, 如果我们想对label进行过滤, 需要设置treeNodeFilterProp的默认值为title。但是对label进行过滤时,默认是不区分大小写的,所以我们通过filterTreeNode进行自定义过滤。但需要注意的是:此时必须设置 treeNodeFilterProp的值为null, 否则就会出现高亮问题。原因如TreeSelect源码所示:

  highlightTreeNode(treeNode) {
    const props = this.props;
    // props.treeNodeFilterProp的值默认为value,此时filterVal返回的内容是节点的value值,类型为string
    const filterVal = treeNode.props[labelCompatible(props.treeNodeFilterProp)];
    if (typeof filterVal === "string") {
      return props.inputValue && filterVal.indexOf(props.inputValue) > -1;
    }
    return false;
  },

所以我们必须重置treeNodeFilterProp的值为null,阻止Tree组件进行高亮,才能避免这个问题。

本文链接:http://www.asyncoder.com//post/antd-treeselect-filter-problems.html

-- EOF --

Comments