select如何实现既可以像input那样支持输入，又可以从下拉中选择? antd

Question

不可以多选，使用tags属性的时候会支持多选，希望能够保存自己输入的内容，
网上找的答案说是用combobox跟tabIndex={0}这两个属性，试了下是不起作用的，我当前用的antd版本是3.15.0的，请问有遇到这问题的吗

Answer 1

为什么不用AutoComplete?

Answer 2

真的要使用select组件的话，也可以不用改造组件实现，配合showSearch以及onSearch：

const {searchKeyWordDataType} = this.state;
<Select  
    style={{width: '300px'}}  
    placeholder="请输入"
    showSearch
    onSearch={value => this.setDataType(value)}
>
    {
        searchKeyWordDataType ? 
        <Option value={searchKeyWordDataType} >{searchKeyWordDataType}</Option> 
        : ''
    }
    <Option value="int" >int</Option>
    <Option value="string" >string</Option>
</Select>

setDataType(value) {
   this.setState({
     searchKeyWordDataType: value
   });
}

Answer 3

我去看了一下antd 支持，支持输入和筛选的话再多选模式下是支持的，也就是 mode="tag" 的方式是OK的。单选的情形需要您自己实现这个逻辑，用户输入时候如果不存在就提示用户新建即可。

Answer 4

思路：如果下拉框的数据是固定的，且不需要搜索，那么可以自己写一个组件（输入框 + 下拉框），输入框覆盖在下拉框上面就行。

代码：

/*
 * 支持编辑的下拉框（不可搜索）
 * @Author: Eric 
 * @Date: 2019-01-30 16:09:13 
 * @Last Modified by: Eric
 * @Last Modified time: 2019-04-28 16:08:32
 */


import React from 'react';
import classNames from 'classnames';
import { Select, Input } from 'antd';

class EditableSelect extends React.Component {
    /* 
        鼠标离开输入框后校验是否有值及填充默认值
    */
    onBlur = e => {
        let value = e.target.value;

        let {onChange, onBlur, default:defaultValue} = this.props;

        if(value === '' && defaultValue){
            onChange && this.props.onChange(defaultValue);
        }

        onBlur && onBlur(e);
    }

    render() {
        let { children, value, inputValue, disabled=false} = this.props;
        return (
            <div className='ue-editable-select'>
                <Select {...this.props} showSearch={false}>
                    {children}
                </Select>

                <Input 
                    className="ue-editable-select-input" 
                    disabled={disabled} 
                    value={value} 
                    onChange={this.props.onChange} 
                    onBlur={this.onBlur}/>
            </div>
        );
    }
}

export default EditableSelect;

Answer 5

showSearch 仔细看文档
Select

Answer 6

<Select mode='combobox' optionLabelProp='children'>...</Select>,