jimu-mobile/example/components/search.js

积木组件库助力移动端开发

import React, { Component } from 'react';
import JIMU from './index';

const { Search } = JIMU;

export class _Search extends Component {
  constructor(props) {
    super(props)
    this.state = {}
  }
  render() {
    return (
      <div className="example-wrap">
        <div className="example-back"><a href="http://es-static.xiaojukeji.com/static/web/activity/jimudemo3/index.html#/?_k=qn72wa"><span className="icon-pic-home" /></a></div>
        <div className="libs-intr" style={{ minHeight: `${document.body.clientHeight - 94}px` }}>
          <h2 className="page-title"><b>Search</b><span>搜索</span></h2>
          <div className="demo-content">
            <h2 className="demo-title">搜索</h2>
            <div className="example-search-box">
              <Search
                onChangeHandle={function (text) { console.log(`change:${text}`); }}
                onClearHandle={function () { console.log('clearHandle'); }}
                onFocusHandle={function () { console.log('onFocusHandle'); }}
                onBlurHandle={function (text) { console.log('onBlurHandle'); }}
              />
            </div>
          </div>
          <div className="demo-content">
            <h2 className="demo-title">搜索(带取消)</h2>
            <div className="example-search-box">
              <Search
                onChangeHandle={function (text) { console.log(`change:${text}`); }}
                onClearHandle={function () { console.log('clearHandle'); }}
                onFocusHandle={function () { console.log('onFocusHandle'); }}
                onBlurHandle={function (text) { console.log('onBlurHandle'); }}
                onCancelHandle={function (text) { console.log('onCancelHandle'); }}
              />
            </div>
          </div>
        </div>

        <div className="footer-name">
          <span className="footer-name-pic" />
        </div>
      </div>
    );
  }
}

module.exports = _Search;