antd踩坑: Select 模糊搜索
import { Select } from 'antd'; const { Option } = Select; function onChange(value) { console.log(`selected ${value}`); } function onBlur() { console.log('blur'); } function onFocus() { console.log('focus'); } function onSearch(val) { console.log('search:', val); } ReactDOM.render( <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>, mountNode, );
这是官方示例。
你是不是以为,加一个 onSearch 就行了?
其实不是。
你还需要:
1 设置title
PrjListData.map(item => <Option key={item.id} title={item.name} value={item.id}>{item.name}</Option>
2 设置 filterOption
filterOption={(input, option) => { if (option && option.props && option.props.title) { return option.props.title === input || option.props.title.indexOf(input) !== -1 } else { return true } }}
以上。
posted on 2020-08-11 20:00 fox_charon 阅读(7928) 评论(0) 编辑 收藏 举报