Select组件中的模糊筛选

组件库：antd
官网：https://ant.design/docs/react/introduce-cn

Select算是用的非常频繁的组件之一了，然而我之前并没有细细研究它。有个表单下拉选择的业务，由于数据量较多，为了方便查找叫我做成可以搜索的下拉框。我以为一个showSearch可以解决，于是敲下：

<Select
    placeholder="选择用户"
    onChange={this.userSelect.bind(this)}
    showSearch
>
    {
        this.state.userList.map((val,ind)=>{
            return <Option value={val.id} key={val.id}>{val.name}</Option>
        })
    }
</Select>

完了后测试，发现不对啊，好像筛选出来的数据不是用户输入的中文。一翻文档还有个filterOption可以控制：

于是经过研究后就变成了：

<Select
    placeholder="选择用户"
    onChange={this.userSelect.bind(this)}
    showSearch
    filterOption={(input, option) =>
        option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
    }
>
    {
        this.state.userList.map((val,ind)=>{
            return <Option value={val.stcd} key={val.stcd}>{val.stnm}</Option>
        })
    }
</Select>

解决。