antd Select组件 filterOption使用
在使用antd Select组件的filterOption的踩坑。
如下是官网给出的示例：
<Select
showSearch
style={
{
width: 200 }}
placeholder="Select a person"
optionFilterProp="children"
filterOption={
(input, option) =>{
console.log(input,option) option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}}
>
<Option value="jack">jack</Option>
<Option value="lucy">Lucy</Option>
<Option value="tom">Tom</Option>
</Select>
打印input,option结果如下图：
现在是很正常option.props.children的类型是string,使用indexOf,toLowerCase字符串的方法都没问题。但是一旦Option标签里显示值的前后有空格则option.props.children的类型则会成为array类型。这时如果使用了string的方法则会报错导致页面崩溃（请看代码片段1）。
代码片段1如下:
<Select
showSearch
style={
{
width: 200 }}
placeholder="Select a person"
optionFilterProp="children"
filterOption={
(input, option) =>{
console.log(input,option)
option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}}
>
//这里文本前后会有空格
<Option value="jack"> jack </Option>
<Option value="lucy"> Lucy </Option>
<Option value="tom"> Tom </Option>
</Select>
打印结果如下：
这里就需要注意children前后都有了空格（如果你用indexOf然后判断是否相等就会无结果，这个其实无伤大雅可以自己去除空格再做判断,但是如果你用变量形式children就会变成array,会造成崩溃，前提是你用了string的api）.请看代码片段2
代码片段2：
const name="max" //这里需要注意如果变量本身存在空格则结果不会改变（cheildren打印结果" max ",这个时候也得去除空格再做操作） name=" max "
<Select
showSearch
style={
{
width: 200 }}
placeholder="Select a person"
optionFilterProp="children"
filterOption={
(input, option) =>{
console.log(input,option)
option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}}
>
//注意这里name前面多了空格 cheildren会变成['','max']
<Option value="tom"> {
name}</Option>
</Select>
代码片段2打印结果：
**注意这里name为变量，前面多了空格 cheildren会变成[’ ',‘max’]**如果这时使用string 的api就会出现报错，导致页面崩溃。这里可以判断children类型做出不同的处理。
类型为string就让他用string Api.
类型为array就循环调用（先去除空项）string Api.
(Array.isArray(option.props.children) ? option.props.children.join('') : option.props.children).toLowerCase()
filterOption = {(input, option) => {
(Array.isArray(option.props.children) ? option.props.children.join('') : option.props.children).toLowerCase().indexOf(input.toLowerCase()) >= 0
}}
2021-11-17 补充
antd 4版本 也存在 这个 问题 所以也需要 判断一下 。区别就是 4.x版本 直接 options.children
3.x是 option.props.children.
4.x最好 把 return 也加上。
filterOption = {(input, option) => {
return (Array.isArray(option.children) ? option.children.join('') : option.children).toLowerCase().indexOf(input.toLowerCase()) >= 0
}}
这样写就不用加return。 上面的写法 是适用于 多行 ，也就是说你还可以写其它代码 。
下面这个 只能一句代码。
filterOption = {
(input, option) =>
(Array.isArray(option.children) ? option.children.join('') : option.children).toLowerCase().indexOf(input.toLowerCase()) >= 0
}
<Select
showSearch
style={
{
width: 200 }}
placeholder="Select a person"
optionFilterProp="children"
onChange={
onChange}
onFocus={
onFocus}
onBlur={
onBlur}
onSearch={
onSearch}
filterOption={
(input, option) =>
option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
<Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
<Option value="tom">Tom</Option>
</Select>
<Select
showSearch
style={
{
width: 200 }}
placeholder="Select a person"
optionFilterProp="children"
onChange={
onChange}
onFocus={
onFocus}
onBlur={
onBlur}
onSearch={
onSearch}
filterOption={
(input, option) =>
option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
<Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
<Option value="tom">Tom</Option>
</Select>
2021-11-18补充
还可能出现
TypeErro:Cannot resd property ‘toLowerCase’ of null at filterOption . 需要判断 值不为空的情况
这时就需要 加个判断 再使用 'toLowerCase
filterOption = {
(input, option) =>
let val=(Array.isArray(option.children) ? option.children.join('') : option.children);
return val?val.toLowerCase().indexOf(input.toLowerCase()) >= 0:null
}
antd Select组件 Option里的值前后有空格则会出现崩溃现象，希望官方可以加入去除空格的操作
2021-12-16补充 select 赋值时的注意事项（类型要相同）
/*
这个案例 主要 是三个 sellect 主要体现了 select 设置 值时跟 类型也有 关系 类型 不对 也赋值不了。
一、是直接 赋值 "1"发现 默认值赋值上了
二、是声明了一个defaultVal 变量 赋值 为 number类型的 1 ，发现 默认值 未生效
三、是声明了一个defaultVal2 变量 赋值 为 string类型的 1 ，发现 默认值 生效
结论 select的默认值 和赋值 时 需要 考虑 类型 必须全等才可以 赋值上
事实上 tree,treeSelect 都是如此
*/
const {
Select } = antd;
const {
Option } = Select;
function handleChange(value) {
console.log(`selected ${
value}`);
}
let defaultVal=1; //类型数字 不能生效
let defaultVal2="1"; //类型 字符串 不能生效
ReactDOM.render(
<div>
<Select defaultValue="1" style={
{
width: 120 }} onChange={
handleChange}>
<Option value="1">Jack</Option>
<Option value="2">Lucy</Option>
</Select>
<Select defaultValue={
defaultVal} style={
{
width: 120 }} onChange={
handleChange}>
<Option value="1">Jack</Option>
<Option value="2">Lucy</Option>
</Select>
<Select defaultValue={
defaultVal2} style={
{
width: 120 }} onChange={
handleChange}>
<Option value="1">Jack</Option>
<Option value="2">Lucy</Option>
</Select>
</div>,
mountNode,
shihsi);
注意给 select 赋值时 类型要相等
antd select 赋值 的注意事项（必须类型相同才可以 在线演示
具体可看这篇博客：
antd select 赋值的注意事项，值赋不上的解决方案（必须类型相同才可以）
事实上 tree,treeSelect 都是如此
总结：
其实这个问题无伤大雅，都可以手动的避免。但是多个人协同开发，就会出现各种意想不到的问题（比如插件自己加空格，格式化，或者是疏忽了加了空格）。应该做好容错处理比如try catch等.但我还是希望官方可以做一些改动。
参考链接：
antd官网示例
antd github issues(遇到问题可以先找有咩有解决方案)