SearchBar 搜索栏

一般可位于 NavBar 下方，通过『取消按钮』退出激活状态。

规则

  • 提供提示文案，帮助用户输入，eg：关键词、双十一特卖。

  • 在搜索栏下方，可提供有用的标签文案，帮助用户通过点击直接完成输入，eg：最近搜索的内容。

代码演示

示例

  1. import { SearchBar } from 'antd-mobile';
  3. const SearchBarExample = React.createClass({
  4.   getInitialState() {
  5.     return {
  6.       value: '美食',
  7.     };
  8.   },
  9.   onChange(value) {
  10.     this.setState({ value });
  11.   },
  12.   clear() {
  13.     this.setState({ value: '' });
  14.   },
  15.   render() {
  16.     return (<div>
  17.       <SearchBar placeholder="搜索" />
  18.       <p style={{ padding: 10, color: '#999' }}>显示取消按钮</p>
  19.       <SearchBar
  20.         value={this.state.value}
  21.         placeholder="搜索"
  22.         onSubmit={(value) => console.log(value, 'onSubmit')}
  23.         onClear={(value) => console.log(value, 'onClear')}
  24.         onFocus={() => console.log('onFocus')}
  25.         onBlur={() => console.log('onBlur')}
  26.         showCancelButton
  27.         onChange={this.onChange}
  28.       />
  29.     </div>);
  30.   },
  31. });
  33. ReactDOM.render(<SearchBarExample />, mountNode);

SearchBar搜索栏 - 图1

API ( 适用平台：WEB、React-Native )

成员说明类型默认值
defaultValue搜索框的默认值String
value搜索框的当前值String
placeholderplaceholderString
onSubmit点击键盘的 enter 会触发 submit 事件(val: string): void
onChangechange 事件的回调(val: string): void
onFocusfocus 事件的回调(): void
onBlurblur 事件的回调(): void
onCancel点击取消链接,只会触发 onCancel 事件, 组件不再主动清除内部的 value 以及触发 onChange 事件(val: string): void
showCancelButton是否一直显示取消按钮boolfalse
cancelText定制取消按钮的文字,String取消
disabled禁用搜索栏,搜索栏只用于显示boolfalse
onClear(web only)点击 clear 图标Func
注：RN 版本更多 API 请参考 http://facebook.github.io/react-native/docs/textinput.html