使用react实现select_【React】select如何实现既可以像input那样支持输入，又可以从下拉中选择? antd…

不可以多选，使用tags属性的时候会支持多选，希望能够保存自己输入的内容，

网上找的答案说是用combobox跟tabIndex={0}这两个属性，试了下是不起作用的，我当前用的antd版本是3.15.0的，请问有遇到这问题的吗

回答

为什么不用AutoComplete?

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

const {searchKeyWordDataType} = this.state;

style={{width: '300px'}}

placeholder="请输入"

showSearch

onSearch={value => this.setDataType(value)}

>

{

searchKeyWordDataType ?

{searchKeyWordDataType}

: ''

}

int

string

setDataType(value) {

this.setState({

searchKeyWordDataType: value

});

}

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

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

代码：

/*

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

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

);

}

}

export default EditableSelect;

showSearch 仔细看文档

Select

…,