yylib-quick-mobile
Version:
yylib-quick-mobile
59 lines (57 loc) • 2.16 kB
JavaScript
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;