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 (
  17.       <SearchBar
  18.         value={this.state.value}
  19.         placeholder="搜索"
  20.         onSubmit={(value) => console.log(value, 'onSubmit')}
  21.         onClear={(value) => console.log(value, 'onClear')}
  22.         onFocus={() => console.log('onFocus')}
  23.         onBlur={() => console.log('onBlur')}
  24.         showCancelButton={false}
  25.         onChange={this.onChange}
  26.       />
  27.     );
  28.   },
  29. });
  31. ReactDOM.render(<SearchBarExample />, mountNode);

定制取消按钮文案和回调

  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.   render() {
  13.     return (
  14.       <SearchBar
  15.         value={this.state.value}
  16.         placeholder="搜索"
  17.         onCancel={(value) => { alert(`${value}, 取消事件自定义`); }}
  18.         cancelText="搜索"
  19.         showCancelButton
  20.         onChange={this.onChange}
  21.       />
  22.     );
  23.   },
  24. });
  26. ReactDOM.render(<SearchBarExample />, mountNode);

禁用

  1. import { SearchBar } from 'antd-mobile';
  3. const SearchBarExample = () => (
  4.   <SearchBar
  5.     placeholder="搜索"
  6.     disabled
  7.   />
  8. );
  10. ReactDOM.render(<SearchBarExample />, mountNode);

SearchBar搜索栏 - 图1

API

成员说明类型默认值
defaultValue搜索框的默认值String
value搜索框的当前值String
placeholderplaceholderString
onSubmit点击键盘的enter会触发submit事件Func
onChangechange事件的回调Func
onFocusfocus事件的回调Func
onBlurblur事件的回调Func
onClear点击clear图标Func
onCancel点击取消链接,只会触发onCancel事件,组件不再主动清除内部的value以及触发onChange事件。Func
showCancelButton是否一直显示取消按钮boolfalse
cancelText定制取消按钮的文字,String取消
disabled禁用搜索栏,搜索栏只用于显示boolfalse