UpaasAutoComplete
参数
State
/**必传参数
* @param {labelText} title 下拉按钮文本---必传
* @param {status} 'edit' 编辑态还是搜索态
*/
/**可选参数
* @param {Boolean} hidden 显示或隐藏
* @param {Boolean} disabled 是否禁用
* @param {Boolean} readOnly 是否只读
* @param {String} placeholder 'input框显示提示'
* @param {String} inputDefaultValue input默认值
* @param {array} defaultItems 二维数组数据 [['9999',"a啊啊啊"],['9999',"a啊啊啊"]]
* @param {Boolean} showCloseBtn 是否带清楚按钮
* @param {func} keyUpCallBack:(value, event) =>{} input keyup输入回调
* @param {func} itemCallBack:(event, data) =>{} autocomplete 点击回调
* @param {func} focusCallBack:(value) =>{} input focus输入回调
* @param {func} blurCallBack:(event) =>{} input blur输入回调
* @param {func} changeCallBack:(event, data) =>{} input change输入回调
*/
demo
class App extends Component {
constructor(props) {
super(props)
this.state = {
autoValue: this.setDefaultValue(),
defaultValue: 'aaaaaa'
}
}
setDefaultValue(count = 5) {
let items = [];
if(count==3){
return items;
}else{
for (let i = 0; i < count; i++) {
items.push([i,i]);
}
items.push(['9999',"a啊啊啊"]);
return items;
}
}
setNewValue(event, count) {
this.setState({autoValue: this.setDefaultValue(parseInt(count))})
}
restValue(event, data) {
this.setState({autoValue: []});
}
clearData = ()=> {
this.setState({defaultValue:''})
}
render () {
const {autoValue} = this.state;
const options = {
hidden: false,
disabled: false,
showCloseBtn: true,
readOnly: false,
status:'search',
required: true,
isFetching: false,
showText: '请输入正确信息',
errorStatus: false, //是否报错
errorMsg:"出错了~~~!", //报错信息
helpMsg:"qdwdqwd",
sideTip:false, //toolTip是否左右显示
hiddenTip:false, //toolTip是否显示
labelText: 'UpaasAutoComplete', //左侧 label 文字
placeholder: '', // input placeholder
inputDefaultValue: '', // input 默认值
defaultItems: [], // UpaasAutoComplete 数据 需传入一个DOM数组 nodeName为li
// keyUpCallBack: (event, value) => console.log(event, value), // input keyup输入回调
// itemCallBack: (event, data) => console.log(111), // UpaasAutoComplete 点击回调
focusCallBack: (value) => console.log(value), // input keyup输入回调
blurCallBack: (event) => console.log(event.target), // UpaasAutoComplete 点击回调
changeCallBack: (event,value) => {console.log(event, value)}, // input keyup输入回调
}
return (
<div>
<UpaasAutoComplete {...options} defaultItems={autoValue} keyUpCallBack={::this.setNewValue} itemCallBack={::this.restValue} />
</div>
)
}
}
render(<App />, document.getElementById('content'))