ant-design Cascader 组件的 label 为 ReactNode 时如何进行搜索，是否能加一个 Select 中的 optionFilterProp 属性?

vhipe2zx 于 2022-11-03 发布在 React

关注(0)|答案(7)|浏览(748)

I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Steps to reproduce

使用搜索直接报错，未找到 api 可以调整内部搜索对应的字段

What is expected?

当 label 为 ReactNode 时也支持配置进行搜索

What is actually happening?

无法搜索

Environment	Info
antd	4.15.3
React	16.9.0
System	windows
Browser	chrome-87.0.4280.88

ant-design

来源：https://github.com/ant-design/ant-design/issues/30341

7条答案

按热度按时间

dgjrabp21#

function filter(inputValue, path) {
- return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1;
+ return path.some(option => option.name.toLowerCase().indexOf(inputValue.toLowerCase()) > -1;
}

ReactDOM.render(
  <Cascader
    options={options}
    onChange={onChange}
    placeholder="Please select"
    showSearch={{ filter }}
  />,
  document.getElementById("container")
);

filter 里可以任意比较 option 下的任意属性，所以不需要 optionFilterProp 了。

赞(0）回复(0）举报 2022-11-03

n53p2ov02#

@afc163 自定义 label 为 ReactNode 的情况下，filter 返回 true 之后会报错，Cascader 组件中有使用 label 去做什么事请吗？