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
        }
      }}

以上。