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

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

代码：

/*

* 支持编辑的下拉框(不可搜索)

* @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 (

{children}

className="ue-editable-select-input"

disabled={disabled}

value={value}

onChange={this.props.onChange}

onBlur={this.onBlur}/>

);

}

}

export default EditableSelect;