React——antd4中遇到的 Select 坑

如果要动态渲染 Options ，还要在Select上设置这个属性：

filterOption={false}

也就是：

import React from 'react'
import { Select } from 'antd'
const { Option } = Select;

export default class AtSelect extends Component{
    render(){
        const { list } = this.state;
        return(
            <Select
                placeholder="请选择"
                filterOption={(input, option) =>
                	// 异步动态加载 option 的时候一定要加
					option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
				}
                onSearch={this.handleSearch}
            >
                {
                    list.map((item, index) => (
                        <Option key={index} value={item}>{item}</Option>
                    ))
                }
            </Select>
        )
    }
    ...
}

否则的话，是不会动态更改option里的值的，因为filterOption默认为true, 当你输入内容时候,会先在已有选项里面寻找符合项, 无论是否找到，都会重新渲染Option, 这样你接口请求的数据的渲染被覆盖了, 自然看不到结果了。所以需要将其设置为false 或者写一个过滤的方法来关闭它的自动筛选功能。

公众号：Coder 杂谈，欢迎关注