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

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

阅读 3k
评论
    6 个回答
    adore
    • 86

    为什么不用AutoComplete?

    评论 赞赏
      白云飘飘
      • 1
      • 新人请关照

      真的要使用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
         });
      }
      
      评论 赞赏
        zsirfs
        • 651

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

        评论 赞赏
          Eric
          • 506

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

          代码:

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

            showSearch 仔细看文档
            Select

            评论 赞赏
              kemabailuobo
              • 1
              • 新人请关照

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

              评论 赞赏
                撰写回答

                登录后参与交流、获取后续更新提醒