0.2.2 • Published 8 years ago
tingle-search-bar v0.2.2
tingle-search-bar 
The SearchBar Component for tinglejs
TL;DR
SearchBar 是搜索查询用的输入框。
Install
npm install tingle-search-bar --saveSimple Usage
constructor(props) {
super(props);
this.state = {
value: '',
keyCode: ''
};
}
handleChange(value) {
var t = this;
t.setState({
value: value
});
}
handleKeyDown(keyCode, value) {
var t = this;
t.setState({
keyCode: keyCode,
value: value
});
}
render() {
var t = this;
return (
<div>
<SearchBar placeholder="搜索" value={t.state.value} autoFocus={false} onChange={t.handleChange.bind(t)} onKeyDown={t.handleKeyDown.bind(t)}/>
{t.state.value}
</div>
);
}Options 可用配置
| 配置项 | 必填 | 默认值 | 功能/备注 |
|---|---|---|---|
| className | optional | - | 自定义样式类 |
| placeholder | optional | 搜索 | 输入框提示占位符 |
| value | optional | - | 输入框的输入字符 |
| autoFocus | optional | false | 是否自动获取焦点 |
| onChange | optional | - | 输入变化后触发的事件，需要在这里变更 value 的值 |
| onKeyDown | optional | - | key down时触发事件，回传keyCode和value值 |