yylib-quick-mobile/dist/yylib/search-bar/demo/basic.js

yylib-quick-mobile

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;