目前我的穿梭框属性大致如下:
<Transfer
dataSource={dataSource}
targetSource={YYY}
showSearch
onSearch={onSearch}
render={item=> {item.title} -- {item.description}}
onChange={(keys,_,moveKey)=>moveRoles(keys,moveKeys)}
locale={{searchPlaceholder:"请输入关键词"}}
...
当我在穿梭框搜索栏位中,输入值后,我的onSearch
方法可以正确的打印出搜索值,但是控制台抛出异常:
text.includes is not a funtion
于是报错提示中list.js的 matchFilter
方法打上断点排查问题原因
发现该方法遍历了dataSource
,而该方法的第一个形参即为遍历时的每一项,因为我们的render
方法中并不是直接返回了每一项的title
,而是做了自定义的渲染内容。于是该方法现在接收到的参数变为了一个ReactNode,因为该形参和数据结构发生了改变所以无法实现模糊查询。
解决办法有两种:
1.render
方法如果业务场景没有硬性要求,可以修改为String类型的其他内容;
2.如果render
方法为自定义的非String类型内容跟,则务必添加filter
属性,具体示例可参考下面官方给出的例子
const filterOption = (inputValue, option) => option.description.indexOf(inputValue) > -1;
也可以根据title和description同时进行模糊查询~
如有发现遗漏或有误 请狠狠指出