1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > html5 input select 【Web前端问题】select如何实现既可以像input那样支持输入 又

html5 input select 【Web前端问题】select如何实现既可以像input那样支持输入 又

时间:2018-12-14 08:36:45

相关推荐

html5 input select 【Web前端问题】select如何实现既可以像input那样支持输入 又

不可以多选,使用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: -01-30 16:09:13

* @Last Modified by: Eric

* @Last Modified time: -04-28 16:08:32

*/

import React from 'react';

import classNames from 'classnames';

import { Select, Input } from 'antd';

class EditableSelect extends ponent {

/*

鼠标离开输入框后校验是否有值及填充默认值

*/

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;

回答:

showSearch 仔细看文档

Select

回答:

…,

html5 input select 【Web前端问题】select如何实现既可以像input那样支持输入 又可以从下拉中选择? antd...

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。