UNPKG

yylib-quick-mobile

Version:

yylib-quick-mobile

59 lines (57 loc) 2.16 kB
import React from 'react' import {Button, WhiteSpace, WingBlank } from 'antd-mobile' import YYSearchBar from '../YYSearchBar' class YYSearchBarDemo extends React.Component { state = { value: '美食', }; componentDidMount() { this.a.focus(); } onChange= (val) => { console.log(val) }; clear = (val) => { console.log(val) }; handleClick = () => { this.manualFocusInst.focus(); } render() { return ( <div> <WingBlank><div className="sub-title">Normal</div></WingBlank> <YYSearchBar placeholder="Search" maxLength={8} /> <WhiteSpace /> <WingBlank><div className="sub-title">AutoFocus when enter page</div></WingBlank> <YYSearchBar placeholder="自动获取光标" ref={ref => this.a = ref} /> <WhiteSpace /> <WingBlank><div className="sub-title">Focus by operation</div></WingBlank> <YYSearchBar placeholder="手动获取获取光标" ref={ref => this.manualFocusInst = ref} /> <WhiteSpace /> <WingBlank> <Button onClick={this.handleClick} >click to focus</Button> </WingBlank> <WhiteSpace /> <WingBlank><div className="sub-title">Show cancel button</div></WingBlank> <YYSearchBar value={this.state.value} placeholder="Search" 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> ) } } export default YYSearchBarDemo;