weex-nuke/docs/search-bar/demo/test.md

基于 Rax 、Weex 的高性能组件体系 ~~

# SearchBar demo

- order: 0
- hide : true

通过onSearch获取搜索结果

---

````js
/** @jsx createElement */
import { View, Text, SearchBar, Icon, Page } from 'weex-nuke';
import {createElement, Component,render } from 'rax';
let App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.state = {
      value:'',
      value2:'',
      value3:''
    }
  }

  search = (data,e) =>{
    this.setState({
      value: data.value,
    });
  }
  render() {
    return (
      <Page title="SearchBar">
        <Page.Intro main="normal"></Page.Intro>
        <SearchBar style={styles.wrap} onInput={(e)=>console.log('onInput',e)} onFocus={(e)=>console.log('onFocus',e)} onBlur={(e)=>console.log('onBlur',e)} onSearch={this.search} placeholder="输入搜索关键词" />
        <View style={styles.relatedView}><Text style={styles.result}>要搜索的值：{this.state.value}</Text></View>
      </Page>

    );
  }
}
const styles={
    wrap:{
        backgroundColor:'#EBECF0',
    },
    relatedView:{
        padding:'20rem'
    },
    dark:{
        backgroundColor:'#333333',

    },
    input:{
        borderRadius:30,
        backgroundColor:'#E4F0FD'
    },
    result:{
      fontSize:28,
      color:'#999999'
    }

}
render(<App/>);
````