0

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

http_404 193
2019-05-21 提问
4 个回答
2

已采纳

为什么不用AutoComplete?

0

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

0

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

代码:

/*
 * 支持编辑的下拉框(不可搜索)
 * @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;
0

showSearch 仔细看文档
Select

撰写答案

推广链接