SearchBar 搜索框

基本用法

import { SearchBar } from 'zarm';
ReactDOM.render(
  <SearchBar
    onSubmit={(value) => {
      console.log(`搜索内容为${value}`);
    }}
    onFocus={() => {
      console.log('获取焦点');
    }}
    onChange={(value) => {
      console.log(value);
    }}
    onBlur={() => {
      console.log('失去焦点');
    }}
    onClear={() => {
      console.log('点击了清除');
    }}
    onCancel={() => {
      console.log('点击了取消');
    }}
  />
, mountNode);

始终展示取消按钮

import { SearchBar } from 'zarm';
class Demo extends React.Component {
  state = {
    value: '',
  };
  render() {
    return (
      <>
        <SearchBar
          showCancel
          value={this.state.value}
          placeholder="搜索"
          cancelText="取消"
          onChange={(value) => {
            console.log(value);
            this.setState({
              value,
            });
          }}
          onClear={(value) => {
            console.log('清除了 -> ', value);
            this.setState({
              value: '',
            });
          }}
        />
      </>
    )
  }
}
ReactDOM.render(<Demo />, mountNode);

多形状

import { SearchBar } from 'zarm';
ReactDOM.render(
  <>
    <SearchBar shape="rect" />
    <SearchBar shape="round" />
  </>
, mountNode);

手动获取焦点

import { SearchBar, Button } from 'zarm';
class Demo extends React.Component {
  render() {
    return (
      <>
        <SearchBar ref={(ref) => { this.manualFocus = ref; }} />
        <div className="button-wrap">
          <Button theme="primary" size="xs" shape="radius" onClick={() => { this.manualFocus.focus(); }}>点击获取焦点</Button>
        </div>
      </>
    )
  }
}
ReactDOM.render(<Demo />, mountNode);

API