@beisen/AutoComplete

AutoComplete

参数

State

isFocus: false,  // 输入框样式控制
inputValue: props && props.inputDefaultValue || '' //input表单值

PropTypes

hidden: PropTypes.bool,
disabled: PropTypes.bool,
readOnly: PropTypes.bool,
labelText: PropTypes.oneOfType([
  PropTypes.string,
  PropTypes.number,
]).isRequired,
placeholder: PropTypes.oneOfType([
  PropTypes.string,
  PropTypes.number,
]),
inputDefaultValue: PropTypes.oneOfType([
  PropTypes.string,
  PropTypes.number,
]),
showCloseBtn: PropTypes.bool,
defaultItems: PropTypes.arrayOf(PropTypes.element).isRequired,
keyUpCallBack: PropTypes.func.isRequired,
itemCallBack: PropTypes.func.isRequired,
focusCallBack: PropTypes.func,
blurCallBack: PropTypes.func,
changeCallBack: PropTypes.func

使用方法

1.安装npm组件包

npm install @beisen/AutoComplete --save-dev

2.引用组件

import PopLayer from "@beisen/AutoComplete"

3.传入参数

该参数为上述参数，传入方式使用: {...参数}

options:{
	'hidden': false, // 是否渲染
	'disabled': false, // 不可用
	'readOnly': true, // 只读
	'labelText': 'AutoComplete', //左侧 label 文字
	'placeholder': '请输入', // input placeholder
	'inputDefaultValue': null, // input 默认值
	'defaultItems': [], // autocomplete 数据 需传入一个DOM数组 nodeName为li
	'showCloseBtn': true, // 输入框是否带清除按钮
	'keyUpCallBack': (value, event) => console.log(value, event), // input keyup输入回调
	'itemCallBack': (event, data) => console.log(event), // autocomplete 点击回调 event事件回调，data为li上attribute的值
	'focusCallBack': (value) => console.log(value), // input keyup输入回调
	'blurCallBack': (event) => console.log(event), // autocomplete 点击回调
	'changeCallBack': (event, data) => console.log(value) // input keyup输入回调 event事件回调 data为li上attribute的值
}

class App extends Component {

	constructor(props) {
		super(props)
		this.state = {
			autoValue: this.setDefaultValue()
		}
	}
	
	// 返回defaultItems
	setDefaultValue(count = 5) {
		let items = [];

		for (let i = 0; i < count; i++) {
			items.push(<li key={i}>{i}</li>);
		}
		return items;
	}	
	
	// 根据keyup返回新的defaultItems
	setNewValue(count) {
		this.setState({autoValue: this.setDefaultValue(count)})
	}
	
	// 清空defaultItems
	restValue(event, data) {
		console.log(event, data)
		this.setState({autoValue: null});
	}

  	render () {
		const {autoValue} = this.state;
		const options = {
			labelText: 'AutoComplete',
			placeholder: '请输入',
			inputDefaultValue: null
		}
	    return (
	     	 <AutoComplete {...options} defaultItems={autoValue} keyUpCallBack={::this.setNewValue} itemCallBack={::this.restValue} />
	    )
  	}
}
render(<App />, document.getElementById('content'))