tingle-search-bar

The SearchBar Component for tinglejs

TL;DR

SearchBar 是搜索查询用的输入框。

Install

npm install tingle-search-bar --save

Simple 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值|

Links 相关链接

• Fire a bug/Issues 提Bug
• Tingle项目