weex-nuke/src/node_modules/nuke-search-bar/docs/basic.md

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

# 通过 onSearch 获取搜索结果

* order: 0
- title_en: Get search results through the `onSearch`


通过 onSearch 获取搜索结果

---
```js
<NukePlayGround>
  <SearchBar
    style={styles.wrap}
    onSearch={this.search}
    placeholder="输入搜索关键词"
  />
  
// 按回车触发搜索
  <SearchBar
    onSearch={this.search2}
    showSearchButton={false}
    placeholder="回车搜索"
  />

  <SearchBar
    centered
    onSearch={this.search3}
    showSearchButton={false}
    inputStyle={styles.input}
    placeholderColor={'#4F74B3'}
    placeholder="搜索"
  />
</NukePlayGround>
```
---

```js
/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import SearchBar from 'nuke-search-bar';
import Icon from 'nuke-icon';
import Page from 'nuke-page';

let App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.state = {
      value: '',
      value2: '',
      value3: ''
    };
  }

  search = (data, e) => {
    this.setState({
      value: data.value
    });
  };
  searchOnReturn2 = data => {
    this.setState({
      value2: data.value
    });
  };
  searchOnReturn3 = data => {
    this.setState({
      value3: data.value
    });
  };
  render() {
    return (
      <Page title="SearchBar">
        <Page.Intro main="normal" />
        <SearchBar
          style={styles.wrap}
          onSearch={this.search}
          placeholder="输入搜索关键词"
        />
        <View style={styles.relatedView}>
          <Text style={styles.result}>要搜索的值：{this.state.value}</Text>
        </View>
        <SearchBar
          style={styles.wrap}
          onSearch={this.searchOnReturn2}
          showSearchButton={false}
          placeholder="回车搜索"
        />
        <View style={styles.relatedView}>
          <Text style={styles.result}>要搜索的值：{this.state.value2}</Text>
        </View>
        <Page.Intro main="自定义样式" />
        <SearchBar
          centered
          style={[styles.wrap, styles.dark]}
          onSearch={this.searchOnReturn3}
          showSearchButton={false}
          inputStyle={styles.input}
          placeholderColor={'#4F74B3'}
          placeholder="搜索"
        />
        <View style={styles.relatedView}>
          <Text style={styles.result}>要搜索的值：{this.state.value3}</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 />);
```