antdesign-select搜索功能

2020-06-11  本文已影响0人  JancyCC

filterOption
import { Select } from 'antd';
const { Option } = Select;

function onChange(value) {
console.log(selected ${value});
}

<Select
size="default"
showSearch //使单选模式可搜索
defaultValue="请选择"
suffixIcon={<Icon type="caret-down" />}
style={{ fontSize: 13, boxShadow: 'none',width:"115px" }}
dropdownClassName="dropdownWrapper"
onChange={this.onChangeOption.bind(this)}
filterOption={(input, option) =>
option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}

<Option value="default">请选择</Option>
<Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
<Option value="tom">Tom</Option>
</Select>


官方文档提供demo:filterOption={(input, option) =>
option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
},结果报错,打断点查到少了一层,正确代码如下:
filterOption={(input, option) =>
option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
},
希望可以帮助遇到同样问题的伙伴。

官方文档https://ant.design/components/select-cn/

上一篇 下一篇

猜你喜欢

热点阅读