antd select 模糊搜索踩坑filterOption报错

PairsNightRain

于 2023-09-04 17:04:48 发布

阅读量853

点赞数

文章标签：前端 javascript react.js

本文链接：https://blog.youkuaiyun.com/qq_37161741/article/details/132673324

版权

本文讲述了在使用React组件时，如何修复`filterOption`中的`toLowerCase()`方法报错，并介绍了如何正确处理`title`属性和`indexOf`函数的应用。作者提供了针对`Option`组件的示例代码，确保了搜索功能的正确实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

filterOption={(input, option) =>
option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
报错toLowerCase找不到
修改如下：
1、设置title

xxxdata.map(item => <Option key={item.id} title={item.name} value={item.id}>{item.name}</Option>

2、filter

filterOption={(input, option) => {
  if (option && option.props && option.props.title) {
     return option.props.title === input || option.props.title.indexOf(input) !== -1
   } else {
     return true
   }
 }}