0.0.72 • Published 7 years ago
@beisen/AutoComplete v0.0.72
AutoComplete
参数
State
isFocus: false, // 输入框样式控制
inputValue: props && props.inputDefaultValue || '' //input表单值
Props
hidden: false, // 是否渲染
disabled: false, // 不可用
readOnly: true, // 只读
labelText: 'AutoComplete', //左侧 label 文字
placeholder: '请输入', // input placeholder
inputDefaultValue: null, // input 默认值
defaultItems: [], // autocomplete 数据 需传入一个DOM数组 nodeName为li
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的值
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,
]),
defaultItems: PropTypes.arrayOf(PropTypes.element).isRequired,
keyUpCallBack: PropTypes.func.isRequired,
itemCallBack: PropTypes.func.isRequired,
focusCallBack: PropTypes.func,
blurCallBack: PropTypes.func,
changeCallBack: PropTypes.func
使用方法
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'))
0.0.72
7 years ago
0.0.71
7 years ago
0.0.70
7 years ago
0.0.69
7 years ago
0.0.68
7 years ago
0.0.67
7 years ago
0.0.66
7 years ago
0.0.65
7 years ago
0.0.64
7 years ago
0.0.63
7 years ago
0.0.62
7 years ago
0.0.61
7 years ago
0.0.60
7 years ago
0.0.59
7 years ago
0.0.58
7 years ago
0.0.57
7 years ago
0.0.56
7 years ago
0.0.55
7 years ago
0.0.54
8 years ago
0.0.53
8 years ago
0.0.52
8 years ago
0.0.51
8 years ago
0.0.50
8 years ago
0.0.48
8 years ago
0.0.47
8 years ago
0.0.46
8 years ago
0.0.45
8 years ago
0.0.44
8 years ago
0.0.43
8 years ago
0.0.42
8 years ago
0.0.41
8 years ago