SearchBar 搜索栏

规则

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

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

代码演示

基本

import { SearchBar } from 'antd-mobile';
const SearchBarExample = React.createClass({
  getInitialState() {
    return {
      value: '美食',
    };
  },
  onChange(value) {
    this.setState({ value });
  },
  clear() {
    this.setState({ value: '' });
  },
  render() {
    return (
      <SearchBar
        value={this.state.value}
        placeholder="搜索"
        onSubmit={(value) => console.log(value, 'onSubmit')}
        onClear={(value) => console.log(value, 'onClear')}
        onFocus={() => console.log('onFocus')}
        onBlur={() => console.log('onBlur')}
        showCancelButton={false}
        onChange={this.onChange}
      />
    );
  },
});
ReactDOM.render(<SearchBarExample />, mountNode);

定制取消按钮文案和回调

import { SearchBar } from 'antd-mobile';
const SearchBarExample = React.createClass({
  getInitialState() {
    return {
      value: '',
    };
  },
  onChange(value) {
    this.setState({ value });
  },
  render() {
    return (
      <SearchBar
        value={this.state.value}
        placeholder="搜索"
        onCancel={(value) => { alert(`${value}, 取消事件自定义`); }}
        cancelText="搜索"
        showCancelButton
        onChange={this.onChange}
      />
    );
  },
});
ReactDOM.render(<SearchBarExample />, mountNode);

禁用

import { SearchBar } from 'antd-mobile';
const SearchBarExample = () => (
  <SearchBar
    placeholder="搜索"
    disabled
  />
);
ReactDOM.render(<SearchBarExample />, mountNode);

API

SearchBar