SearchBar 搜索栏

规则

• 应该在 placeholder 里提供提示文字，提醒用户输入相关内容，比如：双11特卖。

• 在搜索栏下方，可提供有用的标签文案，帮助用户通过点击直接完成输入，比如：列出一些最近搜索的关键词。

代码演示

基本

import { SearchBar, Button, WhiteSpace, WingBlank } from 'antd-mobile';
class SearchBarExample extends React.Component {
  state = {
    value: '美食',
    focused: false,
  };
  onChange= (value) => {
    // console.log(value, 'onChange');
    this.setState({ value });
  };
  clear = () => {
    this.setState({ value: '' });
  };
  render() {
    return (<div>
      <WingBlank><div className="sub-title">普通</div></WingBlank>
      <SearchBar placeholder="搜索" maxLength={8} />
      <WhiteSpace />
      <WingBlank><div className="sub-title">自动获取光标，支付宝客户端有效</div></WingBlank>
      <SearchBar placeholder="自动获取光标，支付宝客户端有效" autoFocus />
      <WhiteSpace />
      <WingBlank><div className="sub-title">手动获取获取光标</div></WingBlank>
      <SearchBar
        placeholder="手动获取获取光标"
        focused={this.state.focused}
        onFocus={() => {
          this.setState({
            focused: false,
          });
        }}
      />
      <WhiteSpace />
      <WingBlank>
        <Button
          onClick={() => {
            this.setState({
              focused: true,
            });
          }}
        >点击获取光标</Button>
      </WingBlank>
      <WhiteSpace />
      <WingBlank><div className="sub-title">显示取消按钮</div></WingBlank>
      <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')}
        onCancel={() => console.log('onCancel')}
        showCancelButton
        onChange={this.onChange}
      />
    </div>);
  }
}
ReactDOM.render(<SearchBarExample />, mountNode);

.am-search {
  border-bottom: 1px solid #ddd;
}
.sub-title {
  color: #888;
  font-size: .28rem;
  padding: 30px 0 18px 0;
}

API