antd踩坑: Select 模糊搜尋
阿新 • • 發佈:2020-08-11
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 } }}
以上。